fix(ui): resolve Select component CSS issues

Fixes multiple CSS issues in the Select component:

- Added min-width constraint to SelectPopover to match trigger width
- Removed unwanted focus-visible outline on SelectList that appeared
  on mouse click
- Changed Popover overflow from 'scroll' to 'auto' on Y-axis and
  'hidden' on X-axis to prevent unnecessary scrollbars

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

.changeset/deep-gifts-slide.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed CSS issues in Select component including popover width constraints, focus outline behavior, and overflow handling.

packages/ui/report.api.md

@@ -623,6 +623,7 @@ export const componentDefinitions: {
   readonly Select: {
     readonly classNames: {
       readonly root: 'bui-Select';
+      readonly popover: 'bui-SelectPopover';
       readonly trigger: 'bui-SelectTrigger';
       readonly value: 'bui-SelectValue';
       readonly icon: 'bui-SelectIcon';

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

@@ -19,7 +19,8 @@
 @layer components {
   .bui-Popover {
     margin-right: 12px;
-    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: auto;
     background-color: var(--bui-bg-surface-1);
     border: 1px solid var(--bui-border);
     border-radius: var(--bui-radius-3);

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

@@ -17,10 +17,8 @@
 @layer tokens, base, components, utilities;
 
 @layer components {
-  .bui-Select[data-invalid] {
-    & .bui-SelectTrigger {
-      border-color: var(--bui-fg-danger);
-    }
+  .bui-SelectPopover {
+    min-width: var(--trigger-width);
   }
 
   .bui-SelectTrigger {
@@ -74,6 +72,7 @@
       outline: 0;
     }
 
+    .bui-Select[data-invalid] &,
     &[data-invalid] {
       border-color: var(--bui-fg-danger);
     }
@@ -120,6 +119,14 @@
     }
   }
 
+  .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-SelectItem {
     position: relative;
     width: var(--anchor-width);

packages/ui/src/components/Select/Select.tsx

@@ -98,6 +98,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
         className={clsx(
           popoverClassNames.root,
           stylesPopover[popoverClassNames.root],
+          classNames.popover,
+          styles[classNames.popover],
         )}
       >
         <ListBox className={clsx(classNames.list, styles[classNames.list])}>

packages/ui/src/utils/componentDefinitions.ts

@@ -296,6 +296,7 @@ export const componentDefinitions = {
   Select: {
     classNames: {
       root: 'bui-Select',
+      popover: 'bui-SelectPopover',
       trigger: 'bui-SelectTrigger',
       value: 'bui-SelectValue',
       icon: 'bui-SelectIcon',