fix(ui): fix scroll overflow in Menu and Select popovers

When viewport height constrains the popover, content now scrolls
instead of overflowing.

- Menu: add flex column layout and overflow hidden to .bui-MenuInner
- Select: add overflow auto and min-height 0 to .bui-SelectList

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/khaki-days-arrive.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed scroll overflow in Menu and Select popover content when constrained by viewport height.
+
+**Affected components:** Menu, Select

packages/ui/src/components/Menu/Menu.module.css

@@ -58,6 +58,10 @@
 
   .bui-MenuInner {
     border-radius: var(--menu-border-radius);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
   }
 
   .bui-MenuContent {

packages/ui/src/components/Select/Select.module.css

@@ -116,12 +116,17 @@
     }
   }
 
-  .bui-SelectList:focus-visible {
-    /* Remove default focus-visible outline because React Aria
-     * triggers it on mouse click open of the list for some reason.
-     * On keyboard use, the top item receives the focus style,
-     * so it's not needed anyway. */
-    outline: none;
+  .bui-SelectList {
+    overflow: auto;
+    min-height: 0;
+
+    &:focus-visible {
+      /* Remove default focus-visible outline because React Aria
+       * triggers it on mouse click open of the list for some reason.
+       * On keyboard use, the top item receives the focus style,
+       * so it's not needed anyway. */
+      outline: none;
+    }
   }
 
   .bui-SelectItem {