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:
parent
09846a4516
commit
cd136aa6a5
1 changed files with 5 additions and 0 deletions
|
@ -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"
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue