From f8e32748f9f21073b01aebb514d273874b4c53c8 Mon Sep 17 00:00:00 2001
From: prsmith777 <prsmith777@hotmail.com>
Date: Sat, 22 Aug 2026 16:55:51 -0600
Subject: [PATCH 1/3] Align recognition feed filters in a fixed grid

---
 components/LiveFeedDateRangeFilter.jsx        |  3 +-
 components/PlateTable.jsx                     | 23 ++++++++++-----
 ...ecognition-feed-filter-preference.test.mjs | 29 +++++++++++++++++++
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/components/LiveFeedDateRangeFilter.jsx b/components/LiveFeedDateRangeFilter.jsx
index 0b7c2d1..50420b5 100644
--- a/components/LiveFeedDateRangeFilter.jsx
+++ b/components/LiveFeedDateRangeFilter.jsx
@@ -21,6 +21,7 @@ export default function LiveFeedDateRangeFilter({
   onChange,
   onInteractionChange = () => {},
   embedded = false,
+  triggerClassName = "",
 }) {
   const fromMs = value?.from?.getTime?.() ?? null;
   const toMs = value?.to?.getTime?.() ?? null;
@@ -66,7 +67,7 @@ export default function LiveFeedDateRangeFilter({
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className="hidden gap-2 dark:bg-[#161618] sm:flex"
+          className={`hidden gap-2 dark:bg-[#161618] sm:flex ${triggerClassName}`}
         >
           <CalendarDays className="h-4 w-4" />
           {value?.from ? (
diff --git a/components/PlateTable.jsx b/components/PlateTable.jsx
index 89ebce5..5e6ca95 100644
--- a/components/PlateTable.jsx
+++ b/components/PlateTable.jsx
@@ -1614,7 +1614,12 @@ export default function PlateTable({
     return `${numericConfidence * 100}%`; // Keep formatting consistent
   };
 
-  const HourRangeFilter = ({ timeFormat, value = {}, onChange }) => {
+  const HourRangeFilter = ({
+    timeFormat,
+    value = {},
+    onChange,
+    triggerClassName = "",
+  }) => {
     const [isOpen, setIsOpen] = useState(false);
     // Local display state - what the user actually entered
     const [displayHours, setDisplayHours] = useState({
@@ -1685,7 +1690,7 @@ export default function PlateTable({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className="hidden sm:flex gap-2 dark:bg-[#161618]"
+            className={`hidden sm:flex gap-2 dark:bg-[#161618] ${triggerClassName}`}
           >
             <Clock className="h-4 w-4" />
             {getTimeRangeLabel()}
@@ -2116,7 +2121,7 @@ export default function PlateTable({
             </div>
 
             {/* Desktop Filters */}
-            <div className="hidden sm:flex flex-wrap gap-2">
+            <div className="hidden w-full grid-cols-4 gap-2 sm:grid">
               <MultiSelectFilter
                 ariaLabel="Filter by tags"
                 allLabel="All tags"
@@ -2124,7 +2129,7 @@ export default function PlateTable({
                 options={tagFilterOptions}
                 exclusiveValues={["untagged"]}
                 onChange={handleTagChange}
-                className="h-9 w-[180px] dark:bg-[#161618]"
+                className="h-9 w-full dark:bg-[#161618]"
               />
               <MultiSelectFilter
                 ariaLabel="Filter by cameras"
@@ -2132,7 +2137,7 @@ export default function PlateTable({
                 value={selectedCameras}
                 options={cameraFilterOptions}
                 onChange={handleCameraChange}
-                className="h-9 w-[180px] dark:bg-[#161618]"
+                className="h-9 w-full dark:bg-[#161618]"
               />
               <MultiSelectFilter
                 ariaLabel="Filter by review status"
@@ -2140,7 +2145,7 @@ export default function PlateTable({
                 value={selectedReviewStatuses}
                 options={reviewStatusFilterOptions}
                 onChange={handleReviewStatusChange}
-                className="h-9 w-[210px] dark:bg-[#161618]"
+                className="h-9 w-full dark:bg-[#161618]"
               />
               <MultiSelectFilter
                 ariaLabel="Filter by direction"
@@ -2148,11 +2153,11 @@ export default function PlateTable({
                 value={selectedDirections}
                 options={directionFilterOptions}
                 onChange={handleDirectionChange}
-                className="h-9 w-[190px] dark:bg-[#161618]"
+                className="h-9 w-full dark:bg-[#161618]"
               />
               <Popover>
                 <PopoverTrigger asChild>
-                  <Button variant="outline" className="h-9 gap-2 dark:bg-[#161618]">
+                  <Button variant="outline" className="h-9 w-full justify-start gap-2 dark:bg-[#161618]">
                     Speed{filters.minimumSpeed || filters.maximumSpeed
                       ? `: ${filters.minimumSpeed || "0"}–${filters.maximumSpeed || "200"} mph`
                       : ""}
@@ -2173,6 +2178,7 @@ export default function PlateTable({
                 value={filters.dateRange}
                 onChange={handleDateRangeChange}
                 onInteractionChange={onFilterInteractionChange}
+                triggerClassName="w-full justify-start"
               />
 
               <HourRangeFilter
@@ -2190,6 +2196,7 @@ export default function PlateTable({
                         : undefined,
                   })
                 }
+                triggerClassName="w-full justify-start"
               />
               {(filters.readId ||
                 filters.search ||
diff --git a/test/recognition-feed-filter-preference.test.mjs b/test/recognition-feed-filter-preference.test.mjs
index 439f430..8d68ab4 100644
--- a/test/recognition-feed-filter-preference.test.mjs
+++ b/test/recognition-feed-filter-preference.test.mjs
@@ -178,3 +178,32 @@ test("Recognition Feed restores saved state before querying and keeps explicit l
     "clearing filters must preserve the independently saved rows-per-page preference"
   );
 });
+
+test("Recognition Feed desktop filters use a fixed aligned four-column grid", async () => {
+  const table = await readFile(
+    new URL("../components/PlateTable.jsx", import.meta.url),
+    "utf8"
+  );
+  const desktopFilters = table.slice(
+    table.indexOf("{/* Desktop Filters */}"),
+    table.indexOf("{/* Active filters display */}")
+  );
+
+  assert.match(desktopFilters, /className="hidden w-full grid-cols-4 gap-2 sm:grid"/);
+  const labels = [
+    'allLabel="All tags"',
+    'allLabel="All cameras"',
+    'allLabel="All review statuses"',
+    'allLabel="All directions"',
+    "Speed{filters.minimumSpeed",
+    "<LiveFeedDateRangeFilter",
+    "<HourRangeFilter",
+  ];
+  let previousIndex = -1;
+  for (const label of labels) {
+    const index = desktopFilters.indexOf(label);
+    assert.ok(index > previousIndex, `${label} must remain in the requested grid order`);
+    previousIndex = index;
+  }
+  assert.match(desktopFilters, /triggerClassName="w-full justify-start"/);
+});

From 42daf5cf5c86b8dda2cb2c27db278f342b06090d Mon Sep 17 00:00:00 2001
From: prsmith777 <prsmith777@hotmail.com>
Date: Sat, 22 Aug 2026 16:57:54 -0600
Subject: [PATCH 2/3] Align search controls with filter grid

---
 components/PlateTable.jsx                       | 14 +++++++-------
 .../recognition-feed-filter-preference.test.mjs | 17 +++++++++++------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/components/PlateTable.jsx b/components/PlateTable.jsx
index 5e6ca95..e1601bf 100644
--- a/components/PlateTable.jsx
+++ b/components/PlateTable.jsx
@@ -2060,10 +2060,10 @@ export default function PlateTable({
               >
                 {/* Search and Filters section - Desktop and Mobile */}
                 <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex w-full flex-wrap items-start sm:items-center gap-2">
+          <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-4">
             {/* Search bar - Full Width on Mobile */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 w-full sm:w-auto">
-              <div className="flex items-center w-full sm:w-auto">
+            <div className="contents">
+              <div className="flex w-full items-center sm:col-span-2">
                 <Input
                   placeholder="Search plates or speed..."
                   icon={
@@ -2071,7 +2071,7 @@ export default function PlateTable({
                   }
                   value={searchInput}
                   onChange={handleSearchChange}
-                  className="w-full sm:w-64 h-9 dark:bg-[#161618]"
+                  className="h-9 w-full dark:bg-[#161618]"
                 />
 
                 {/* Mobile Filter Button */}
@@ -2107,7 +2107,7 @@ export default function PlateTable({
               </div>
 
               {/* Plate matching - Desktop only */}
-              <div className="hidden w-[310px] sm:block">
+              <div className="hidden w-full sm:col-span-2 sm:block">
                 <PlateMatchModeSelect
                   id="match-mode"
                   value={filters.matchMode}
@@ -2115,13 +2115,13 @@ export default function PlateTable({
                   settings={matchingSettings}
                   prefixLabel="Plate matching"
                   ariaLabel="Plate matching"
-                  className="h-9 dark:bg-[#161618]"
+                  className="h-9 w-full dark:bg-[#161618]"
                 />
               </div>
             </div>
 
             {/* Desktop Filters */}
-            <div className="hidden w-full grid-cols-4 gap-2 sm:grid">
+            <div className="hidden sm:contents">
               <MultiSelectFilter
                 ariaLabel="Filter by tags"
                 allLabel="All tags"
diff --git a/test/recognition-feed-filter-preference.test.mjs b/test/recognition-feed-filter-preference.test.mjs
index 8d68ab4..7bc78d8 100644
--- a/test/recognition-feed-filter-preference.test.mjs
+++ b/test/recognition-feed-filter-preference.test.mjs
@@ -179,18 +179,23 @@ test("Recognition Feed restores saved state before querying and keeps explicit l
   );
 });
 
-test("Recognition Feed desktop filters use a fixed aligned four-column grid", async () => {
+test("Recognition Feed desktop search and filters use one aligned four-column grid", async () => {
   const table = await readFile(
     new URL("../components/PlateTable.jsx", import.meta.url),
     "utf8"
   );
-  const desktopFilters = table.slice(
-    table.indexOf("{/* Desktop Filters */}"),
+  const desktopSearchGrid = table.slice(
+    table.indexOf("{/* Search bar - Full Width on Mobile */}"),
     table.indexOf("{/* Active filters display */}")
   );
 
-  assert.match(desktopFilters, /className="hidden w-full grid-cols-4 gap-2 sm:grid"/);
+  assert.match(table, /className="grid w-full grid-cols-1 gap-2 sm:grid-cols-4"/);
+  assert.match(desktopSearchGrid, /className="flex w-full items-center sm:col-span-2"/);
+  assert.match(desktopSearchGrid, /className="hidden w-full sm:col-span-2 sm:block"/);
+  assert.match(desktopSearchGrid, /className="hidden sm:contents"/);
   const labels = [
+    'placeholder="Search plates or speed..."',
+    'prefixLabel="Plate matching"',
     'allLabel="All tags"',
     'allLabel="All cameras"',
     'allLabel="All review statuses"',
@@ -201,9 +206,9 @@ test("Recognition Feed desktop filters use a fixed aligned four-column grid", as
   ];
   let previousIndex = -1;
   for (const label of labels) {
-    const index = desktopFilters.indexOf(label);
+    const index = desktopSearchGrid.indexOf(label);
     assert.ok(index > previousIndex, `${label} must remain in the requested grid order`);
     previousIndex = index;
   }
-  assert.match(desktopFilters, /triggerClassName="w-full justify-start"/);
+  assert.match(desktopSearchGrid, /triggerClassName="w-full justify-start"/);
 });

From 13ff8ddf7f44f651323b98e657dd7fcfc74145d4 Mon Sep 17 00:00:00 2001
From: prsmith777 <prsmith777@hotmail.com>
Date: Sat, 22 Aug 2026 17:12:07 -0600
Subject: [PATCH 3/3] Condense recognition filters into two rows

---
 components/PlateTable.jsx                     | 74 +++++++------------
 ...ecognition-feed-filter-preference.test.mjs | 11 +--
 2 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/components/PlateTable.jsx b/components/PlateTable.jsx
index e1601bf..56ebe4f 100644
--- a/components/PlateTable.jsx
+++ b/components/PlateTable.jsx
@@ -2060,7 +2060,7 @@ export default function PlateTable({
               >
                 {/* Search and Filters section - Desktop and Mobile */}
                 <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-4">
+          <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-5">
             {/* Search bar - Full Width on Mobile */}
             <div className="contents">
               <div className="flex w-full items-center sm:col-span-2">
@@ -2107,7 +2107,7 @@ export default function PlateTable({
               </div>
 
               {/* Plate matching - Desktop only */}
-              <div className="hidden w-full sm:col-span-2 sm:block">
+              <div className="hidden w-full sm:block">
                 <PlateMatchModeSelect
                   id="match-mode"
                   value={filters.matchMode}
@@ -2139,6 +2139,30 @@ export default function PlateTable({
                 onChange={handleCameraChange}
                 className="h-9 w-full dark:bg-[#161618]"
               />
+              <LiveFeedDateRangeFilter
+                value={filters.dateRange}
+                onChange={handleDateRangeChange}
+                onInteractionChange={onFilterInteractionChange}
+                triggerClassName="w-full justify-start"
+              />
+
+              <HourRangeFilter
+                timeFormat={timeFormat}
+                value={filters.hourRange || {}}
+                onChange={(hourRange) =>
+                  onUpdateFilters({
+                    hourFrom:
+                      typeof hourRange.from === "number"
+                        ? hourRange.from.toString()
+                        : undefined,
+                    hourTo:
+                      typeof hourRange.to === "number"
+                        ? hourRange.to.toString()
+                        : undefined,
+                  })
+                }
+                triggerClassName="w-full justify-start"
+              />
               <MultiSelectFilter
                 ariaLabel="Filter by review status"
                 allLabel="All review statuses"
@@ -2173,52 +2197,6 @@ export default function PlateTable({
                   </div>
                 </PopoverContent>
               </Popover>
-
-              <LiveFeedDateRangeFilter
-                value={filters.dateRange}
-                onChange={handleDateRangeChange}
-                onInteractionChange={onFilterInteractionChange}
-                triggerClassName="w-full justify-start"
-              />
-
-              <HourRangeFilter
-                timeFormat={timeFormat}
-                value={filters.hourRange || {}}
-                onChange={(hourRange) =>
-                  onUpdateFilters({
-                    hourFrom:
-                      typeof hourRange.from === "number"
-                        ? hourRange.from.toString()
-                        : undefined,
-                    hourTo:
-                      typeof hourRange.to === "number"
-                        ? hourRange.to.toString()
-                        : undefined,
-                  })
-                }
-                triggerClassName="w-full justify-start"
-              />
-              {(filters.readId ||
-                filters.search ||
-                selectedTags.length > 0 ||
-                selectedDirections.length > 0 ||
-                filters.minimumSpeed ||
-                filters.maximumSpeed ||
-                filters.dashboardTimeFrame ||
-                filters.dashboardMetric ||
-                filters.dateRange.from ||
-                (filters.hourRange?.from !== undefined &&
-                  filters.hourRange?.to !== undefined)) && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={clearFilters}
-                  className="gap-2"
-                >
-                  <X className="h-4 w-4" />
-                  Clear Filters
-                </Button>
-              )}
             </div>
           </div>
 
diff --git a/test/recognition-feed-filter-preference.test.mjs b/test/recognition-feed-filter-preference.test.mjs
index 7bc78d8..282b13d 100644
--- a/test/recognition-feed-filter-preference.test.mjs
+++ b/test/recognition-feed-filter-preference.test.mjs
@@ -179,7 +179,7 @@ test("Recognition Feed restores saved state before querying and keeps explicit l
   );
 });
 
-test("Recognition Feed desktop search and filters use one aligned four-column grid", async () => {
+test("Recognition Feed desktop search and filters use one aligned five-column grid", async () => {
   const table = await readFile(
     new URL("../components/PlateTable.jsx", import.meta.url),
     "utf8"
@@ -189,20 +189,20 @@ test("Recognition Feed desktop search and filters use one aligned four-column gr
     table.indexOf("{/* Active filters display */}")
   );
 
-  assert.match(table, /className="grid w-full grid-cols-1 gap-2 sm:grid-cols-4"/);
+  assert.match(table, /className="grid w-full grid-cols-1 gap-2 sm:grid-cols-5"/);
   assert.match(desktopSearchGrid, /className="flex w-full items-center sm:col-span-2"/);
-  assert.match(desktopSearchGrid, /className="hidden w-full sm:col-span-2 sm:block"/);
+  assert.match(desktopSearchGrid, /className="hidden w-full sm:block"/);
   assert.match(desktopSearchGrid, /className="hidden sm:contents"/);
   const labels = [
     'placeholder="Search plates or speed..."',
     'prefixLabel="Plate matching"',
     'allLabel="All tags"',
     'allLabel="All cameras"',
+    "<LiveFeedDateRangeFilter",
+    "<HourRangeFilter",
     'allLabel="All review statuses"',
     'allLabel="All directions"',
     "Speed{filters.minimumSpeed",
-    "<LiveFeedDateRangeFilter",
-    "<HourRangeFilter",
   ];
   let previousIndex = -1;
   for (const label of labels) {
@@ -211,4 +211,5 @@ test("Recognition Feed desktop search and filters use one aligned four-column gr
     previousIndex = index;
   }
   assert.match(desktopSearchGrid, /triggerClassName="w-full justify-start"/);
+  assert.doesNotMatch(desktopSearchGrid, />\s*Clear Filters\s*</);
 });