app/javascript/wardrobe-2020/WardrobePage/PosePicker.js

@@ -17,7 +17,6 @@ import {
   TabPanel,
   TabPanels,
   VisuallyHidden,
-  useBreakpointValue,
   useColorModeValue,
   useTheme,
   useToast,
@@ -81,13 +80,11 @@ function PosePicker({
   const { isSupportUser } = useSupport();
   const toast = useToast();
 
-  const loading = posesQuery.loading || altStylesQuery.isLoading;
+  const loading = posesQuery.loading || altStylesQuery.loading;
   const error = posesQuery.error ?? altStylesQuery.error;
   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(() => {
@@ -164,7 +161,7 @@ function PosePicker({
 
   return (
     <Popover
-      placement={placement}
+      placement="bottom-end"
       returnFocusOnClose
       onOpen={onLockFocus}
       onClose={onUnlockFocus}
@@ -179,22 +176,9 @@ function PosePicker({
           </PopoverTrigger>
           <Portal>
             <PopoverContent>
-              <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>
+              <Tabs size="sm" variant="soft-rounded">
                 <TabPanels position="relative">
-                  <TabPanel paddingX="4" paddingY="0">
+                  <TabPanel>
                     {isInSupportMode ? (
                       <PosePickerSupport
                         speciesId={speciesId}
@@ -217,7 +201,7 @@ function PosePicker({
                       </>
                     )}
                     <SupportOnly>
-                      <Box position="absolute" top="1" left="3">
+                      <Box position="absolute" top="5" left="3">
                         <PosePickerSupportSwitch
                           isChecked={isInSupportMode}
                           onChange={(e) => setIsInSupportMode(e.target.checked)}
@@ -225,11 +209,17 @@ function PosePicker({
                       </Box>
                     </SupportOnly>
                   </TabPanel>
-                  <TabPanel paddingX="4" paddingY="0">
+                  <TabPanel>
                     <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>