From 9abaebac4bed9c304dd4c934f1959ba474fd8385 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Mon, 3 Aug 2026 15:33:19 +0000
Subject: [PATCH] Select: stop capped dropdowns overflowing their card

RAC writes the maxHeight prop as an inline max-height on the popover,
a border-box measure that includes the card's padding and border. The
list inherited that same value, so it overshot the inner box and rows
spilled past the rounded bottom edge. Size it with flex instead.
Fixes the ComboBox equivalent too, since the slots are shared.
---
 packages/ui/src/Select.recipe.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/Select.recipe.ts b/packages/ui/src/Select.recipe.ts
index 5d10836..ce7bdc1 100644
--- a/packages/ui/src/Select.recipe.ts
+++ b/packages/ui/src/Select.recipe.ts
@@ -122,6 +122,8 @@ export const select = defineSlotRecipe({
       // button it measures; `ComboBox` measures its own control and sets the
       // width inline, because RAC's var is the *input's* width there.
       minWidth: "var(--trigger-width)",
+      display: "flex",
+      flexDirection: "column",
       bg: "white",
       color: "inherit",
       py: "2",
@@ -141,7 +143,6 @@ export const select = defineSlotRecipe({
     },
     list: {
       outline: "none",
-      maxHeight: "inherit",
       overflowY: "auto",
     },
     option: {