From 5520e07992ca5bea9d9f83ea49e287e6b2a8c2d4 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 14 May 2026 15:39:41 +0100
Subject: [PATCH] fix(ui): allow fields to grow in flex layouts

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/fix-ui-field-flex.md                            | 5 +++++
 packages/ui/src/components/Combobox/Combobox.module.css    | 7 +++++++
 .../ui/src/components/DatePicker/DatePicker.module.css     | 2 +-
 .../components/DateRangePicker/DateRangePicker.module.css  | 2 +-
 .../src/components/PasswordField/PasswordField.module.css  | 2 +-
 .../ui/src/components/SearchField/SearchField.module.css   | 1 -
 packages/ui/src/components/Select/Select.module.css        | 7 +++++++
 packages/ui/src/components/TextField/TextField.module.css  | 2 +-
 8 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fix-ui-field-flex.md

diff --git a/.changeset/fix-ui-field-flex.md b/.changeset/fix-ui-field-flex.md
new file mode 100644
index 0000000000..406df76b28
--- /dev/null
+++ b/.changeset/fix-ui-field-flex.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Updated field components to grow within flex layouts instead of forcing their width to remain fixed.
diff --git a/packages/ui/src/components/Combobox/Combobox.module.css b/packages/ui/src/components/Combobox/Combobox.module.css
index 3ec2748cec..efde0c89a7 100644
--- a/packages/ui/src/components/Combobox/Combobox.module.css
+++ b/packages/ui/src/components/Combobox/Combobox.module.css
@@ -28,6 +28,13 @@
     }
   }
 
+  .bui-Combobox {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+  }
+
   .bui-ComboboxPopover {
     min-width: var(--trigger-width);
 
diff --git a/packages/ui/src/components/DatePicker/DatePicker.module.css b/packages/ui/src/components/DatePicker/DatePicker.module.css
index 6fd60dffac..01a7d26ef3 100644
--- a/packages/ui/src/components/DatePicker/DatePicker.module.css
+++ b/packages/ui/src/components/DatePicker/DatePicker.module.css
@@ -26,7 +26,7 @@
     flex-direction: column;
     font-family: var(--bui-font-regular);
     width: 100%;
-    flex-shrink: 0;
+    flex: 1;
   }
 
   /* ============================================================
diff --git a/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css b/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css
index 4bb6b47a82..354d3f1733 100644
--- a/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css
+++ b/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css
@@ -26,7 +26,7 @@
     flex-direction: column;
     font-family: var(--bui-font-regular);
     width: 100%;
-    flex-shrink: 0;
+    flex: 1;
   }
 
   /* ============================================================
diff --git a/packages/ui/src/components/PasswordField/PasswordField.module.css b/packages/ui/src/components/PasswordField/PasswordField.module.css
index 8ede1212a0..296f1b5831 100644
--- a/packages/ui/src/components/PasswordField/PasswordField.module.css
+++ b/packages/ui/src/components/PasswordField/PasswordField.module.css
@@ -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;
diff --git a/packages/ui/src/components/SearchField/SearchField.module.css b/packages/ui/src/components/SearchField/SearchField.module.css
index b52c313a7d..6bfbb419f8 100644
--- a/packages/ui/src/components/SearchField/SearchField.module.css
+++ b/packages/ui/src/components/SearchField/SearchField.module.css
@@ -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;
diff --git a/packages/ui/src/components/Select/Select.module.css b/packages/ui/src/components/Select/Select.module.css
index 1016c42c4a..c0d3d139fa 100644
--- a/packages/ui/src/components/Select/Select.module.css
+++ b/packages/ui/src/components/Select/Select.module.css
@@ -28,6 +28,13 @@
     }
   }
 
+  .bui-Select {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+  }
+
   .bui-SelectPopover {
     min-width: var(--trigger-width);
   }
diff --git a/packages/ui/src/components/TextField/TextField.module.css b/packages/ui/src/components/TextField/TextField.module.css
index bfef441f51..b1fcf6610a 100644
--- a/packages/ui/src/components/TextField/TextField.module.css
+++ b/packages/ui/src/components/TextField/TextField.module.css
@@ -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);