Merge pull request #34256 from backstage/cursor/ui-field-flex

fix(ui): allow fields to grow in flex layouts
2026-05-16 16:53:46 +02:00
parent e51af8cced 5520e07992
commit eab8f7a510
8 changed files with 23 additions and 5 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Updated field components to grow within flex layouts instead of forcing their width to remain fixed.
@@ -28,6 +28,13 @@
    }
  }

+  .bui-Combobox {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+  }
+
  .bui-ComboboxPopover {
    min-width: var(--trigger-width);

@@ -26,7 +26,7 @@
    flex-direction: column;
    font-family: var(--bui-font-regular);
    width: 100%;
-    flex-shrink: 0;
+    flex: 1;
  }

  /* ============================================================
@@ -26,7 +26,7 @@
    flex-direction: column;
    font-family: var(--bui-font-regular);
    width: 100%;
-    flex-shrink: 0;
+    flex: 1;
  }

  /* ============================================================
@@ -22,7 +22,7 @@
    flex-direction: column;
    font-family: var(--bui-font-regular);
    width: 100%;
-    flex-shrink: 0;
+    flex: 1;

    &[data-on-bg='neutral-1'] .bui-PasswordFieldInput {
      background-color: var(--bui-bg-neutral-2);
@@ -23,7 +23,6 @@
    font-family: var(--bui-font-regular);
    width: 100%;
    flex: 1;
-    flex-shrink: 0;

    &[data-size='small'] {
      --search-field-item-height: 2rem;
@@ -28,6 +28,13 @@
    }
  }

+  .bui-Select {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+  }
+
  .bui-SelectPopover {
    min-width: var(--trigger-width);
  }
@@ -22,7 +22,7 @@
    flex-direction: column;
    font-family: var(--bui-font-regular);
    width: 100%;
-    flex-shrink: 0;
+    flex: 1;

    &[data-on-bg='neutral-1'] .bui-Input {
      background-color: var(--bui-bg-neutral-2);