From c850d1850818f3af7e99e8093692eaa91b2a1cfa Mon Sep 17 00:00:00 2001
From: Mayur Sahare <mayursahare2024@gmail.com>
Date: Sat, 20 Jun 2026 00:50:11 +0530
Subject: [PATCH] Fix: resolve search filter controls overlap on findings page
 (#901)

Includes unit tests for layout regression.
---
 frontend/src/pages/Findings.tsx               | 22 +++++++++----------
 frontend/testing/unit/pages/Findings.test.tsx | 16 ++++++++++++++
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Findings.tsx b/frontend/src/pages/Findings.tsx
index fe65c3274..36ad271af 100644
--- a/frontend/src/pages/Findings.tsx
+++ b/frontend/src/pages/Findings.tsx
@@ -598,9 +598,9 @@ export default function Findings() {
               </div>
             </div>
 
-            <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-end">
-              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8">
-                <div className="space-y-2">
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>Target</label>
                   <select
                     value={filterTarget}
@@ -614,7 +614,7 @@ export default function Findings() {
                   </select>
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>Scanner / Tool</label>
                   <select
                     value={filterScanner}
@@ -628,7 +628,7 @@ export default function Findings() {
                   </select>
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>Asset</label>
                   <select
                     value={filterAsset}
@@ -642,7 +642,7 @@ export default function Findings() {
                   </select>
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>Finding Kind</label>
                   <select
                     value={filterKind}
@@ -656,7 +656,7 @@ export default function Findings() {
                   </select>
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>Analyst State</label>
                   <select
                     value={filterAnalystStatus}
@@ -670,7 +670,7 @@ export default function Findings() {
                   </select>
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>Sort By</label>
                   <select
                     value={sortMode}
@@ -685,7 +685,7 @@ export default function Findings() {
                   </select>
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>From Date</label>
                   <input
                     type="date"
@@ -695,7 +695,7 @@ export default function Findings() {
                   />
                 </div>
 
-                <div className="space-y-2">
+                <div className="space-y-2 min-w-0">
                   <label className={filterLabelClass}>To Date</label>
                   <input
                     type="date"
@@ -706,7 +706,7 @@ export default function Findings() {
                 </div>
               </div>
 
-              <div className="flex flex-wrap items-center gap-2">
+              <div className="flex flex-wrap items-center gap-2 lg:justify-end border-t border-silver-bright/10 pt-4">
                 <label className="inline-flex h-11 items-center gap-3 border border-silver-bright/10 bg-charcoal-dark px-4 text-[10px] font-black uppercase tracking-[0.18em] text-silver/75">
                   <input
                     type="checkbox"
diff --git a/frontend/testing/unit/pages/Findings.test.tsx b/frontend/testing/unit/pages/Findings.test.tsx
index 5a23d8c85..0b74980f2 100644
--- a/frontend/testing/unit/pages/Findings.test.tsx
+++ b/frontend/testing/unit/pages/Findings.test.tsx
@@ -259,4 +259,20 @@ describe('Findings — virtualized list', () => {
     const suppressedChips = screen.queryAllByText('suppressed')
     expect(suppressedChips.length).toBeGreaterThan(0)
   })
+
+  it('renders filter section with correct layout classes to prevent overlap', async () => {
+    vi.mocked(getFindings).mockResolvedValue({ findings: [] })
+    render(<Findings />)
+    await waitFor(() => expect(screen.queryByText('Synchronizing findings feed...')).not.toBeInTheDocument())
+
+    const targetLabel = screen.getByText('Target')
+    const fieldContainer = targetLabel.closest('div')
+    expect(fieldContainer).toHaveClass('space-y-2', 'min-w-0')
+
+    const gridContainer = fieldContainer?.parentElement
+    expect(gridContainer).toHaveClass('grid', 'gap-4', 'sm:grid-cols-2', 'lg:grid-cols-3', 'xl:grid-cols-4')
+
+    const filterContainer = gridContainer?.parentElement
+    expect(filterContainer).toHaveClass('flex', 'flex-col', 'gap-6')
+  })
 })