Refactor item page preview to grid layout

because I wanna add zones to the area below the faces!

src/app/ItemPage.js

@@ -20,6 +20,7 @@ import {
   WrapItem,
   Flex,
   usePrefersReducedMotion,
+  Grid,
 } from "@chakra-ui/react";
 import {
   CheckIcon,
@@ -681,17 +682,35 @@ function ItemPageOutfitPreview({ itemId }) {
   }
 
   return (
-    <Stack
+    <Grid
-      direction={{ base: "column", md: "row" }}
+      templateAreas={{
-      align={{ base: "center", md: "flex-start" }}
+        base: `
-      justify="center"
+          "preview"
-      spacing="8"
+          "speciesColorPicker"
-      width="100%"
+          "speciesFacesPicker"
+          "zones"
+        `,
+        md: `
+          "preview             speciesFacesPicker"
+          "speciesColorPicker  zones"
+        `,
+      }}
+      templateRows={{
+        base: "auto auto 400px auto",
+        md: "400px auto",
+      }}
+      templateColumns={{
+        base: "minmax(min-content, 400px)",
+        md: "minmax(min-content, 400px) fit-content(480px)",
+      }}
+      rowGap="4"
+      columnGap="6"
+      justifyContent="center"
     >
-      <VStack spacing="3" maxWidth="100%">
       <AspectRatio
-          width="400px"
+        gridArea="preview"
-          maxWidth="100%"
+        maxWidth="400px"
+        maxHeight="400px"
         ratio="1"
         border="1px"
         borderColor={borderColor}
@@ -717,7 +736,7 @@ function ItemPageOutfitPreview({ itemId }) {
           )}
         </Box>
       </AspectRatio>
-        <Box display="flex" width="100%" alignItems="center">
+      <Box gridArea="speciesColorPicker" display="flex" alignItems="center">
         <Box
           // This box grows at the same rate as the box on the right, so the
           // middle box will be centered, if there's space!
@@ -781,8 +800,12 @@ function ItemPageOutfitPreview({ itemId }) {
           }
         </Box>
       </Box>
-      </VStack>
+      <Box
-      <Box maxWidth="460px" paddingTop="2">
+        gridArea="speciesFacesPicker"
+        paddingTop="2"
+        overflow="auto"
+        padding="8px"
+      >
         <SpeciesFacesPicker
           selectedSpeciesId={petState.speciesId}
           selectedColorId={petState.colorId}
@@ -802,7 +825,10 @@ function ItemPageOutfitPreview({ itemId }) {
           isLoading={loadingGQL || loadingValids}
         />
       </Box>
-    </Stack>
+      <Box gridArea="zones" alignSelf="center" justifySelf="center">
+        <ItemZonesInfo />
+      </Box>
+    </Grid>
   );
 }
 
@@ -983,15 +1009,7 @@ function SpeciesFacesPicker({
 
   return (
     <Box>
-      <Wrap
+      <Wrap spacing="0" justify="center">
-        spacing="0"
-        justify="center"
-        // On mobile, give this a scroll container, and some extra padding so
-        // the selected-face effects still fit inside.
-        maxHeight={{ base: "200px", md: "none" }}
-        overflow={{ base: "auto", md: "visible" }}
-        padding={{ base: "8px", md: "0" }}
-      >
         {allSpeciesFaces.map((speciesFace) => (
           <WrapItem key={speciesFace.speciesId}>
             <SpeciesFaceOption
@@ -1237,6 +1255,14 @@ function SpeciesFaceOption({
   );
 }
 
+function ItemZonesInfo() {
+  return (
+    <Box fontSize="sm" textAlign="center">
+      {/* TODO */}
+    </Box>
+  );
+}
+
 /**
  * CrossFadeImage is like <img>, but listens for successful load events, and
  * fades from the previous image to the new image once it loads.