fix(ui): allow fields to grow in flex layouts

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
2026-05-14 15:39:41 +01:00
parent b180f0ffd4
commit 5520e07992
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-size='small'] {
      --password-field-item-height: 2rem;
@@ -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);