From ef79c881e41191f89316f4b7c8d543a0edd226bd Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 21 Aug 2026 21:42:24 +0100
Subject: [PATCH] Refactor FilterInput Component for Improved Layout and
 Styling

- Updated the FilterInput component to enhance its layout by applying a new class and adjusting styles for better responsiveness.
- Modified the ScrollBox and inner div styles to ensure proper sizing and alignment, improving the overall user interface.
- Added CSS rules to support the new layout, ensuring consistent behavior across different screen sizes.
---
 .../Dashboard/common/FilterInput.jsx          | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/Dashboard/common/FilterInput.jsx b/src/components/Dashboard/common/FilterInput.jsx
index 65827d76..69f31874 100644
--- a/src/components/Dashboard/common/FilterInput.jsx
+++ b/src/components/Dashboard/common/FilterInput.jsx
@@ -868,10 +868,28 @@ const FilterInput = ({
         // Keep the input focused while interacting with the popover.
         event.preventDefault()
       }}
-      style={{ width: 280, height: 220, margin: -4 }}
+      className='filter-input-property-filter'
+      style={{
+        display: 'inline-block',
+        maxWidth: 280,
+        maxHeight: 220,
+        margin: -4,
+        verticalAlign: 'top'
+      }}
     >
-      <ScrollBox inner smallPadding>
-        <div style={{ padding: '12px 16px', minWidth: 0 }}>
+      <ScrollBox
+        inner
+        smallPadding
+        style={{ height: 'auto', maxHeight: 220, maxWidth: 280 }}
+      >
+        <div
+          style={{
+            padding: '12px 16px',
+            width: 'max-content',
+            maxWidth: 280,
+            boxSizing: 'border-box'
+          }}
+        >
           <SimplePropertyFilter
             modelType={propertyFilter.modelType}
             propertyName={propertyFilter.propertyName}
@@ -1014,6 +1032,12 @@ const FilterInput = ({
           display: none;
           height: 0;
         }
+        .filter-input-property-filter .simplebar-content-wrapper {
+          max-width: none;
+        }
+        .filter-input-property-filter .simplebar-content {
+          display: inline-block;
+        }
       `}</style>
       {showPlaceholder && (
         <span