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

@@ -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}

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">