From 8f934e83b80c7541ddb306afc9f531a42bdf0ecb Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Mon, 29 Jan 2024 09:09:09 -0800
Subject: [PATCH] Move Expressions/Styles tab to the top/bottom depending on
 placement

On small screens, the PosePicker opens down, and we put the tabs on the
top, to be near the button.

On large screens, the PosePicker opens up, and we put the tabs on the
bottom, to be near the button.

Previously, we always set `placement="bottom-end"`, which on small
screens behaved as written, and on large screens there would not be
space to open downward so it would open upward instead.

Now, we set the placement explicitly based on a media breakpoint, and
we change the `flexDirection` of the tabs container on the same media
breakpoint.
---
 .../wardrobe-2020/WardrobePage/PosePicker.js  | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
index 2800e69d..c9d19876 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
@@ -17,6 +17,7 @@ import {
   TabPanel,
   TabPanels,
   VisuallyHidden,
+  useBreakpointValue,
   useColorModeValue,
   useTheme,
   useToast,
@@ -85,6 +86,8 @@ function PosePicker({
   const poseInfos = posesQuery.poseInfos;
   const altStyles = altStylesQuery.data ?? [];
 
+  const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
+
   // Resize the Popover when we toggle support mode, because it probably will
   // affect the content size.
   React.useLayoutEffect(() => {
@@ -161,7 +164,7 @@ function PosePicker({
 
   return (
     <Popover
-      placement="bottom-end"
+      placement={placement}
       returnFocusOnClose
       onOpen={onLockFocus}
       onClose={onUnlockFocus}
@@ -176,9 +179,22 @@ function PosePicker({
           </PopoverTrigger>
           <Portal>
             <PopoverContent>
-              <Tabs size="sm" variant="soft-rounded">
+              <Tabs
+                size="sm"
+                variant="soft-rounded"
+                display="flex"
+                flexDirection={{ base: "column", md: "column-reverse" }}
+                paddingY="2"
+                gap="2"
+              >
+                <SupportOnly>
+                  <TabList paddingX="2" paddingY="0">
+                    <Tab width="50%">Expressions</Tab>
+                    <Tab width="50%">Styles</Tab>
+                  </TabList>
+                </SupportOnly>
                 <TabPanels position="relative">
-                  <TabPanel>
+                  <TabPanel paddingX="4" paddingY="0">
                     {isInSupportMode ? (
                       <PosePickerSupport
                         speciesId={speciesId}
@@ -201,7 +217,7 @@ function PosePicker({
                       </>
                     )}
                     <SupportOnly>
-                      <Box position="absolute" top="5" left="3">
+                      <Box position="absolute" top="1" left="3">
                         <PosePickerSupportSwitch
                           isChecked={isInSupportMode}
                           onChange={(e) => setIsInSupportMode(e.target.checked)}
@@ -209,17 +225,11 @@ function PosePicker({
                       </Box>
                     </SupportOnly>
                   </TabPanel>
-                  <TabPanel>
+                  <TabPanel paddingX="4" paddingY="0">
                     <StyleSelect altStyles={altStyles} />
                     <StyleExplanation />
                   </TabPanel>
                 </TabPanels>
-                <SupportOnly>
-                  <TabList paddingX="2" paddingY="1">
-                    <Tab width="50%">Expressions</Tab>
-                    <Tab width="50%">Styles</Tab>
-                  </TabList>
-                </SupportOnly>
               </Tabs>
               <PopoverArrow />
             </PopoverContent>