From 9027b10643eb495153806d0958840a9991c5b4d1 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Fri, 27 Feb 2026 13:10:13 +0100
Subject: [PATCH] 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                 |  7 +++++++
 packages/ui/src/components/Menu/Menu.module.css |  4 ++++
 .../ui/src/components/Select/Select.module.css  | 17 +++++++++++------
 3 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/khaki-days-arrive.md

diff --git a/.changeset/khaki-days-arrive.md b/.changeset/khaki-days-arrive.md
new file mode 100644
index 0000000000..ac9d97c394
--- /dev/null
+++ b/.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
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 0717a9468d..e16f87ee5a 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/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 {
diff --git a/packages/ui/src/components/Select/Select.module.css b/packages/ui/src/components/Select/Select.module.css
index 3a5d066d1d..8ceaa2528e 100644
--- a/packages/ui/src/components/Select/Select.module.css
+++ b/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 {