From a4ca9ae522efc06767f7f0189e49797bfaed8a54 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Thu, 1 Feb 2024 07:34:39 -0800 Subject: [PATCH] Make the Alt Styles list less tall on large screens On the small-screen layout, the popover goes down and covers the item list, which isn't a big deal in context; so I want it to be basically as tall as it can be without being unwieldy, to give more info. But on the large-screen layout, it doesn't take long at all for the popover to start intersecting the pet preview, because it *has* to go up and cover the pet preview. So, I'm much more reserved about how much vertical space I'm willing to give it! (I also considered sending the popover off to the *right* of the button, to cover the item list, but it felt *way* too weird imo! Especially in the expressions case.) --- app/javascript/wardrobe-2020/WardrobePage/PosePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js index bbf0b9c2..dfcdb25a 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js +++ b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js @@ -679,7 +679,7 @@ function StyleSelect({ as="form" direction="column" gap="2" - maxHeight="40vh" + maxHeight={{ base: "30vh", md: "10rem" }} padding="4px" overflow="auto" >