From 72c5ee1b913976c774c2d64c804fc917849306b6 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 11 Aug 2026 01:03:40 +0100
Subject: [PATCH] Enhance FilterSidebar with dynamic field select sizing

- Introduced a new FieldSelectLabel component to dynamically size select fields based on the longest label, improving layout consistency.
- Updated FilterSidebar to utilize the FieldSelectLabel for better visual alignment of select options.
- Adjusted CSS styles for the filter sidebar field selects to ensure proper width handling.
---
 assets/stylesheets/App.css                    |  8 +++++
 .../Dashboard/common/FilterSidebar.jsx        | 36 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index c717fa4..582ad7a 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -1131,3 +1131,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   top: -16px !important;
   bottom: -24px !important;
 }
+
+/* Size FilterSidebar field selects to the longest label (via labelRender sizer). */
+.filter-sidebar-field-select.ant-select {
+  width: max-content;
+}
+.filter-sidebar-field-select .ant-select-selector {
+  width: max-content !important;
+}
diff --git a/src/components/Dashboard/common/FilterSidebar.jsx b/src/components/Dashboard/common/FilterSidebar.jsx
index cf7d8cc..0db9c42 100644
--- a/src/components/Dashboard/common/FilterSidebar.jsx
+++ b/src/components/Dashboard/common/FilterSidebar.jsx
@@ -11,6 +11,36 @@ import {
 import MissingPlaceholder from './MissingPlaceholder'
 import BinIcon from '../../Icons/BinIcon'
 
+const hiddenSizerStyle = {
+  gridArea: '1 / 1',
+  visibility: 'hidden',
+  whiteSpace: 'nowrap'
+}
+
+const FieldSelectLabel = ({ label, options }) => (
+  <span style={{ display: 'inline-grid' }}>
+    <span aria-hidden style={hiddenSizerStyle}>
+      Field
+    </span>
+    {options.map((option) => (
+      <span key={option.value} aria-hidden style={hiddenSizerStyle}>
+        {option.label}
+      </span>
+    ))}
+    <span style={{ gridArea: '1 / 1', whiteSpace: 'nowrap' }}>{label}</span>
+  </span>
+)
+
+FieldSelectLabel.propTypes = {
+  label: PropTypes.node,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.string
+    })
+  ).isRequired
+}
+
 const FilterSidebar = ({
   type,
   filter = {},
@@ -169,8 +199,12 @@ const FilterSidebar = ({
                 value={row.field || undefined}
                 onChange={(v) => changeField(row.field, v)}
                 options={availableOptions(row.field)}
-                style={{ minWidth: 80 }}
                 allowClear={false}
+                labelRender={({ label }) => (
+                  <FieldSelectLabel label={label} options={fieldOptions} />
+                )}
+                style={{ flexShrink: 0 }}
+                classNames={{ root: 'filter-sidebar-field-select' }}
               />
               <FilterInput
                 placeholder='Value'