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({ - + {isInSupportMode ? ( { + // 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 (