MenuRenderer, OverflowMenu: Limit the menu height

.changeset/bright-nails-cry.md

@@ -0,0 +1,13 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - MenuRenderer
+  - OverflowMenu
+---
+
+**MenuRenderer, OverflowMenu:** Limit the menu height
+
+Limit the menu to show a maximum of around 10 items before scrolling (a little less so it's evident there is more to scroll to).

packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.css.ts

@@ -26,3 +26,13 @@ export const width = styleVariants({ small, medium, large }, (w) => [
 export const placementBottom = style({
   bottom: '100%',
 });
+
+export const menuYPadding = 'xxsmall';
+
+export const menuHeightLimit = style({
+  maxHeight: calc(vars.touchableSize)
+    .multiply(9.5)
+    .add(vars.space[menuYPadding])
+    .toString(),
+  overflowY: 'auto',
+});

packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx

@@ -380,7 +380,7 @@ export function Menu({
           placement === 'top' && styles.placementBottom,
         ]}
       >
-        <Box paddingY="xxsmall">
+        <Box paddingY={styles.menuYPadding} className={styles.menuHeightLimit}>
           {Children.map(children, (item, i) => {
             if (isDivider(item)) {
               dividerCount++;