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 {