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

@@ -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"
                     />