move outfit preview buttons to top

src/app/OutfitPreview.js

@@ -142,67 +142,46 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
         </Delay>
       )}
       <Box
-        // Bottom toolbar on small screens, top on large screens
         pos="absolute"
-        left={{ base: 2, lg: 6 }}
+        left="0"
-        right={{ base: 2, lg: 6 }}
+        right="0"
-        bottom={{ base: 2, lg: 6 }}
+        top="0"
-        // Grid layout for the content!
+        bottom="0"
+        padding={{ base: 2, lg: 6 }}
         display="grid"
-        gridTemplateAreas={`"space picker buttons"`}
+        overflow="auto"
-        gridTemplateColumns="minmax(0, 1fr) auto 1fr"
+        gridTemplateAreas={`"back sharing"
-        alignItems="flex-end"
+                            "space space"
-      >
+                            "picker picker"`}
-        <Box gridArea="space"></Box>
+        gridTemplateRows="auto minmax(1rem, 1fr) auto"
-        <PseudoBox
-          gridArea="picker"
-          opacity={hasFocus ? 1 : 0}
-          _groupHover={{ opacity: 1 }}
-          transition="opacity 0.2s"
-        >
-          <SpeciesColorPicker
-            outfitState={outfitState}
-            dispatchToOutfit={dispatchToOutfit}
-            onFocus={() => setHasFocus(true)}
-            onBlur={() => setHasFocus(false)}
-          />
-        </PseudoBox>
-        <Stack gridArea="buttons" spacing="2" align="flex-end">
-          <Box>
-            <Tooltip
-              label={hasCopied ? "Copied!" : "Copy link"}
-              placement="left"
       >
+        <Box gridArea="back">
           <IconButton
-                icon={hasCopied ? "check" : "link"}
+            icon="arrow-back"
-                aria-label="Copy link"
+            aria-label="Leave this outfit"
-                isRound
-                onClick={onCopy}
-                onFocus={() => setHasFocus(true)}
-                onBlur={() => setHasFocus(false)}
             variant="unstyled"
             backgroundColor="gray.600"
-                color="gray.50"
+            isRound={true}
-                boxShadow="md"
             d="flex"
             alignItems="center"
             justifyContent="center"
+            color="gray.50"
             opacity={hasFocus ? 1 : 0}
             transition="all 0.2s"
             _groupHover={{
               opacity: 1,
             }}
-                _focus={{
+            onFocus={() => setHasFocus(true)}
-                  opacity: 1,
+            onBlur={() => setHasFocus(false)}
-                  backgroundColor: "gray.500",
+            onClick={() => setShowResetModal(true)}
-                }}
-                _hover={{
-                  backgroundColor: "gray.500",
-                }}
-                outline="initial"
           />
-            </Tooltip>
         </Box>
+        <Stack
+          gridArea="sharing"
+          alignSelf="flex-end"
+          spacing={{ base: "2", lg: "4" }}
+          align="flex-end"
+        >
           <Box>
             <Tooltip label="Download" placement="left">
               <IconButton
@@ -243,27 +222,58 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
               />
             </Tooltip>
           </Box>
-        </Stack>
+          <Box>
-      </Box>
+            <Tooltip
-      <Box pos="absolute" left="3" top="3">
+              label={hasCopied ? "Copied!" : "Copy link"}
+              placement="left"
+            >
               <IconButton
-          icon="arrow-back"
+                icon={hasCopied ? "check" : "link"}
-          aria-label="Leave this outfit"
+                aria-label="Copy link"
+                isRound
+                onClick={onCopy}
+                onFocus={() => setHasFocus(true)}
+                onBlur={() => setHasFocus(false)}
                 variant="unstyled"
-          isRound={true}
+                backgroundColor="gray.600"
+                color="gray.50"
+                boxShadow="md"
                 d="flex"
                 alignItems="center"
                 justifyContent="center"
-          color="gray.50"
                 opacity={hasFocus ? 1 : 0}
                 transition="all 0.2s"
                 _groupHover={{
                   opacity: 1,
                 }}
+                _focus={{
+                  opacity: 1,
+                  backgroundColor: "gray.500",
+                }}
+                _hover={{
+                  backgroundColor: "gray.500",
+                }}
+                outline="initial"
+              />
+            </Tooltip>
+          </Box>
+        </Stack>
+        <Box gridArea="space"></Box>
+        <PseudoBox
+          gridArea="picker"
+          opacity={hasFocus ? 1 : 0}
+          _groupHover={{ opacity: 1 }}
+          transition="opacity 0.2s"
+          display="flex"
+          justifyContent="center"
+        >
+          <SpeciesColorPicker
+            outfitState={outfitState}
+            dispatchToOutfit={dispatchToOutfit}
             onFocus={() => setHasFocus(true)}
             onBlur={() => setHasFocus(false)}
-          onClick={() => setShowResetModal(true)}
           />
+        </PseudoBox>
       </Box>
       <OutfitResetModal
         isOpen={showResetModal}

src/app/SpeciesColorPicker.js

@@ -120,6 +120,7 @@ function SpeciesColorPicker({
         color="gray.50"
         border="none"
         boxShadow="md"
+        width="auto"
         onFocus={onFocus}
         onBlur={onBlur}
       >
@@ -129,7 +130,7 @@ function SpeciesColorPicker({
           </option>
         ))}
       </Select>
-      <Box width="8" />
+      <Box width="4" />
       <Select
         aria-label="Pet species"
         value={outfitState.speciesId}
@@ -138,6 +139,7 @@ function SpeciesColorPicker({
         color="gray.50"
         border="none"
         boxShadow="md"
+        width="auto"
         onFocus={onFocus}
         onBlur={onBlur}
       >