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.
This commit is contained in:
Emi Matchu 2024-02-01 05:31:34 -08:00
parent 09846a4516
commit cd136aa6a5

View file

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