From 027a85fb06bc88cdaf3af75224a6978ac3aa7d93 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Wed, 18 Mar 2026 10:32:29 +0100
Subject: [PATCH] fix: match filter pills row height to breadcrumb bar (45px)

Rework feedback: filter pills row used py-1.5 padding instead of a
fixed 45px height, causing visual misalignment with the breadcrumb bar.
Replace padding with explicit h-[45px] to match exactly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/note-list/FilterPills.tsx |  2 +-
 tests/smoke/filter-pills-height.spec.ts  | 40 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 tests/smoke/filter-pills-height.spec.ts

diff --git a/src/components/note-list/FilterPills.tsx b/src/components/note-list/FilterPills.tsx
index 7acfa807..11e8a2d7 100644
--- a/src/components/note-list/FilterPills.tsx
+++ b/src/components/note-list/FilterPills.tsx
@@ -15,7 +15,7 @@ const PILLS: { value: NoteListFilter; label: string }[] = [
 
 function FilterPillsInner({ active, counts, onChange }: FilterPillsProps) {
   return (
-    <div className="flex shrink-0 items-center gap-1 border-b border-border px-4 py-1.5" data-testid="filter-pills">
+    <div className="flex h-[45px] shrink-0 items-center gap-1 border-b border-border px-4" data-testid="filter-pills">
       {PILLS.map(({ value, label }) => (
         <button
           key={value}
diff --git a/tests/smoke/filter-pills-height.spec.ts b/tests/smoke/filter-pills-height.spec.ts
new file mode 100644
index 00000000..becfa966
--- /dev/null
+++ b/tests/smoke/filter-pills-height.spec.ts
@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Filter pills height matches breadcrumb bar', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+  })
+
+  test('filter pills row height equals breadcrumb bar height (45px)', async ({ page }) => {
+    // Click on the "Projects" type section in the sidebar
+    await page.getByText('Projects', { exact: true }).click()
+
+    // Filter pills should now be visible
+    const pills = page.getByTestId('filter-pills')
+    await expect(pills).toBeVisible()
+
+    // Verify height matches breadcrumb bar (45px)
+    const pillsBox = await pills.boundingBox()
+    expect(pillsBox).not.toBeNull()
+    expect(pillsBox!.height).toBe(45)
+
+    // Verify all three pills are present
+    await expect(page.getByTestId('filter-pill-open')).toBeVisible()
+    await expect(page.getByTestId('filter-pill-archived')).toBeVisible()
+    await expect(page.getByTestId('filter-pill-trashed')).toBeVisible()
+
+    // Open pill should be active by default
+    const openPill = page.getByTestId('filter-pill-open')
+    await expect(openPill).toHaveAttribute('aria-selected', 'true')
+
+    // Verify pills are keyboard accessible (Tab + Enter)
+    await openPill.focus()
+    await expect(openPill).toBeFocused()
+    await page.keyboard.press('Tab')
+    const archivedPill = page.getByTestId('filter-pill-archived')
+    await expect(archivedPill).toBeFocused()
+    await page.keyboard.press('Enter')
+    await expect(archivedPill).toHaveAttribute('aria-selected', 'true')
+  })
+})