From 78216703fb72a50ada291489dc9861c5ccab760c Mon Sep 17 00:00:00 2001
From: ericsocrat <ericsocrat@users.noreply.github.com>
Date: Thu, 19 Mar 2026 23:03:56 +0100
Subject: [PATCH] fix(search): sort button layout + section dividers in filter
 panel (#981)

---
 .../components/search/FilterPanel.test.tsx    | 23 +++++++++++++++++++
 .../src/components/search/FilterPanel.tsx     | 15 +++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/search/FilterPanel.test.tsx b/frontend/src/components/search/FilterPanel.test.tsx
index 7573d560..159cd325 100644
--- a/frontend/src/components/search/FilterPanel.test.tsx
+++ b/frontend/src/components/search/FilterPanel.test.tsx
@@ -478,4 +478,27 @@ describe("FilterPanel", () => {
       expect(screen.getAllByText("Clear all").length).toBeGreaterThanOrEqual(1);
     });
   });
+
+  // ─── Section Dividers ─────────────────────────────────────────────────────
+
+  it("renders section dividers between filter groups", async () => {
+    renderPanel();
+    await waitFor(() => {
+      expect(screen.getAllByText("Relevance").length).toBeGreaterThanOrEqual(1);
+    });
+    const separators = document.querySelectorAll("hr");
+    expect(separators.length).toBeGreaterThanOrEqual(5);
+  });
+
+  // ─── Sort Layout (col-span-2 on last odd button) ─────────────────────────
+
+  it("adds col-span-2 to last sort button when odd count", async () => {
+    renderPanel();
+    await waitFor(() => {
+      expect(screen.getAllByText("Calories").length).toBeGreaterThanOrEqual(1);
+    });
+    // "Calories" is the 5th (odd-last) sort button
+    const caloriesBtn = screen.getAllByText("Calories")[0].closest("button");
+    expect(caloriesBtn?.className).toContain("col-span-2");
+  });
 });
diff --git a/frontend/src/components/search/FilterPanel.tsx b/frontend/src/components/search/FilterPanel.tsx
index 4041f91d..c2589231 100644
--- a/frontend/src/components/search/FilterPanel.tsx
+++ b/frontend/src/components/search/FilterPanel.tsx
@@ -131,14 +131,17 @@ export function FilterPanel({
                   label: t("filters.nutriScore"),
                 },
                 { value: "calories" as const, label: t("filters.calories") },
-              ].map((opt) => {
+              ].map((opt, idx, arr) => {
                 const isActive = (filters.sort_by ?? "relevance") === opt.value;
+                const isLastOdd = arr.length % 2 === 1 && idx === arr.length - 1;
                 return (
                   <button
                     key={opt.value}
                     type="button"
                     onClick={() => setSortBy(opt.value)}
                     className={`rounded-lg px-3 py-2 text-xs font-medium transition-colors ${
+                      isLastOdd ? "col-span-2" : ""
+                    } ${
                       isActive
                         ? "bg-brand-subtle text-brand ring-2 ring-brand/30"
                         : "bg-surface-muted text-foreground-secondary hover:bg-surface-subtle"
@@ -180,6 +183,8 @@ export function FilterPanel({
             )}
           </div>
 
+          <hr className="border-t border-border/40" />
+
           {/* Categories */}
           {data && (data.categories?.length ?? 0) > 0 && (
             <div>
@@ -218,6 +223,8 @@ export function FilterPanel({
             </div>
           )}
 
+          <hr className="border-t border-border/40" />
+
           {/* Nutri-Score */}
           {data && (data.nutri_scores?.length ?? 0) > 0 && (
             <div>
@@ -253,6 +260,8 @@ export function FilterPanel({
             </div>
           )}
 
+          <hr className="border-t border-border/40" />
+
           {/* NOVA Group */}
           {data && (data.nova_groups?.length ?? 0) > 0 && (
             <div>
@@ -287,6 +296,8 @@ export function FilterPanel({
             </div>
           )}
 
+          <hr className="border-t border-border/40" />
+
           {/* Allergen-Free */}
           {data && (data.allergens?.length ?? 0) > 0 && (
             <div>
@@ -325,6 +336,8 @@ export function FilterPanel({
             </div>
           )}
 
+          <hr className="border-t border-border/40" />
+
           {/* Min TryVit Score Slider */}
           <div>
             <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-foreground-secondary">