From cd136aa6a5eeed7a51d0fbf5156bbfadf50088ae Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 1 Feb 2024 05:31:34 -0800
Subject: [PATCH] Make species/color picker smaller on small screens, to fit
 pose picker

Now that the pose picker button can have text content too, things were
getting pretty cramped horizontally on smaller screens! Now we use the
`sm` size when it's small-time.
---
 app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
index 263a0ea0..021a8ac6 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
@@ -24,6 +24,7 @@ import {
   Switch,
   Tooltip,
   UnorderedList,
+  useBreakpointValue,
   useClipboard,
   useToast,
 } from "@chakra-ui/react";
@@ -78,6 +79,8 @@ function OutfitControls({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const toast = React.useMemo(() => _toast, []);
 
+  const speciesColorPickerSize = useBreakpointValue({ base: "sm", md: "md" });
+
   const onSpeciesColorChange = React.useCallback(
     (species, color, isValid, closestPose) => {
       if (isValid) {
@@ -208,6 +211,7 @@ function OutfitControls({
             {outfitState.speciesId && outfitState.colorId && (
               <Flex
                 gridArea="picker"
+                align="center"
                 justify="center"
                 onClick={maybeUnlockFocus}
               >
@@ -223,6 +227,7 @@ function OutfitControls({
                       idealPose={outfitState.pose}
                       onChange={onSpeciesColorChange}
                       stateMustAlwaysBeValid
+                      size={speciesColorPickerSize}
                       speciesTestId="wardrobe-species-picker"
                       colorTestId="wardrobe-color-picker"
                     />