From d41f80518a73a7411e609c044eed031870ab09f1 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 29 Aug 2020 14:19:43 -0700
Subject: [PATCH] fix bug to resize PosePicker when it changes

Previously, toggling between the two PosePicker modes could dramatically disrupt the layout, because Popover didn't know to re-measure itself.

In this change, we add a hacky workaround to simulate a window resize event in moments when we know the content is changing. (The realistic ideal solution would still have these manual triggers, but would use an official API in Chakra to notify the Popper instance directly.)
---
 src/app/WardrobePage/PosePicker.js                | 12 +++++++++++-
 src/app/WardrobePage/support/PosePickerSupport.js | 14 ++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/app/WardrobePage/PosePicker.js b/src/app/WardrobePage/PosePicker.js
index 714e82f..d4f244e 100644
--- a/src/app/WardrobePage/PosePicker.js
+++ b/src/app/WardrobePage/PosePicker.js
@@ -68,6 +68,16 @@ function PosePicker({
     false
   );
 
+  // Resize the Popover when we toggle support mode, because it probably will
+  // affect the content size.
+  React.useLayoutEffect(() => {
+    // HACK: To trigger a Popover resize, we simulate a window resize event,
+    //       because Popover listens for window resizes to reposition itself.
+    //       I've also filed an issue requesting an official API!
+    //       https://github.com/chakra-ui/chakra-ui/issues/1853
+    window.dispatchEvent(new Event("resize"));
+  }, [isInSupportMode]);
+
   if (loading) {
     return null;
   }
@@ -141,7 +151,7 @@ function PosePicker({
           </PopoverTrigger>
           <Portal>
             <PopoverContent>
-              <Box p="4" position="relative" minWidth="200px" minHeight="150px">
+              <Box p="4" position="relative">
                 {isInSupportMode ? (
                   <PosePickerSupport
                     speciesId={speciesId}
diff --git a/src/app/WardrobePage/support/PosePickerSupport.js b/src/app/WardrobePage/support/PosePickerSupport.js
index f07f4ce..29a25c5 100644
--- a/src/app/WardrobePage/support/PosePickerSupport.js
+++ b/src/app/WardrobePage/support/PosePickerSupport.js
@@ -76,6 +76,20 @@ function PosePickerSupport({
     { variables: { speciesId, colorId } }
   );
 
+  // Resize the Popover when we toggle loading state, because it probably will
+  // affect the content size.
+  //
+  // NOTE: This also triggers an additional necessary resize when the component
+  //       first mounts, because PosePicker lazy-loads it, so it actually
+  //       mounting affects size too.
+  React.useLayoutEffect(() => {
+    // HACK: To trigger a Popover resize, we simulate a window resize event,
+    //       because Popover listens for window resizes to reposition itself.
+    //       I've also filed an issue requesting an official API!
+    //       https://github.com/chakra-ui/chakra-ui/issues/1853
+    window.dispatchEvent(new Event("resize"));
+  }, [loading]);
+
   if (loading) {
     return (
       <Box display="flex" justifyContent="center">