fix(search): sort button layout + section dividers in filter panel (#981)

[ericsocrat]

Summary

Closes #981

Sort layout fix: The 5th sort button ("Calories") was orphaned alone in the last row of a 2-column grid. Now adds col-span-2 to the last button when the sort array has an odd count, centering it symmetrically.

Section dividers: Added <hr className="border-t border-border/40" /> between all adjacent filter sections (Sort → Categories → Nutri-Score → NOVA → Allergens → Min Score). This visually separates each filter group and improves scannability in both desktop sidebar and mobile bottom sheet.

Changes

• FilterPanel.tsx: Sort .map() now receives (opt, idx, arr) and applies col-span-2 to the last item when arr.length is odd. 5 <hr> dividers added between sections.
• FilterPanel.test.tsx: +2 tests — section dividers presence (≥5 <hr> elements) and col-span-2 on last sort button.

Verification

• 35/35 FilterPanel tests pass
• npx tsc --noEmit — 0 errors
• 2 files changed, +37/-1 lines

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tryvit	Ready	Preview, Comment	Mar 19, 2026 10:05pm

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[github-actions]

📸 PR Screenshots

Captured 2 screenshots (1 mobile, 1 desktop) for 1 changed page(s):

• search

📥 Download screenshots from workflow artifacts.

_{Captured by PR Screenshots workflow • 2026-03-19}

[github-actions]

Bundle Size Report

Metric	Value
Main baseline	0 KB
This PR	0 KB
Delta	✅ +0 KB (+0%)
JS chunks	0
Hard limit	4000 KB

✅ Bundle size is within acceptable limits.

[Copilot]

Pull request overview

This PR addresses UX issues in the search FilterPanel by improving sort button grid symmetry (odd last item spans both columns) and adding visual dividers between filter groups.

Changes:

• Update sort option rendering to apply col-span-2 to the final button when the option count is odd.
• Add <hr> separators between filter sections (Sort → Categories → Nutri-Score → NOVA → Allergens → Min Score).
• Add tests for divider presence and the odd-last sort button spanning behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
frontend/src/components/search/FilterPanel.tsx	Adds odd-last grid spanning for sort buttons and inserts section divider <hr> elements.
frontend/src/components/search/FilterPanel.test.tsx	Adds tests asserting dividers exist and the last sort button gets col-span-2 when appropriate.

[Copilot]

The new

---

dividers are always rendered even when the adjacent section is conditionally absent (e.g., no categories/nutri_scores/etc.). This can result in dividers not actually separating two rendered groups (including potentially multiple consecutive dividers). Consider only rendering a divider when both the previous and next sections are present, or build a list of rendered sections and interleave separators between them.

[Copilot]

These

---

elements are inserted as additional direct children inside a space-y-5 container, which will add vertical spacing both above and below each divider (effectively doubling the gap between sections vs. before). If the intent is to keep the same spacing and just add a subtle separator, consider switching to a divide-y approach on a wrapper that only contains the filter groups (excluding the Clear button), or remove space-y-5 and explicitly control margins/padding around the divider.

Suggested change

	<hr className="border-t border-border/40" />
	{/* Categories */}
	{data && (data.categories?.length ?? 0) > 0 && (
	<div>
	{/* Categories */}
	{data && (data.categories?.length ?? 0) > 0 && (
	<div className="border-t border-border/40 pt-5">

[Copilot]

This test queries document.querySelectorAll("hr"), which isn't scoped to the rendered FilterPanel and can be influenced by other DOM content. Since renderPanel() returns the render result, prefer scoping to its container (or using Testing Library queries) to make the test deterministic; also consider asserting the expected divider count per rendered panel, since desktop+mobile may render duplicates.

Suggested change

	renderPanel();
	await waitFor(() => {
	expect(screen.getAllByText("Relevance").length).toBeGreaterThanOrEqual(1);
	});
	const separators = document.querySelectorAll("hr");
	const { container } = renderPanel();
	await waitFor(() => {
	expect(screen.getAllByText("Relevance").length).toBeGreaterThanOrEqual(1);
	});
	const separators = container.querySelectorAll("hr");

[Copilot]

caloriesBtn?.className can become undefined if the closest button isn't found, leading to a less clear failure mode. Since the presence of the element is required for the assertion, explicitly assert that caloriesBtn is non-null (or use a role-based query that returns the button) before checking for col-span-2.

Suggested change

	const caloriesBtn = screen.getAllByText("Calories")[0].closest("button");
	expect(caloriesBtn?.className).toContain("col-span-2");
	const caloriesBtn = screen.getByRole("button", { name: /Calories/i });
	expect(caloriesBtn.className).toContain("col-span-2");