From 9b6d8fbef1c82ef9b2b18520d6b95bfc3e4a02b0 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 3 May 2026 09:03:55 +0200
Subject: [PATCH] fix(geschichten): bump filter pills to 44px touch target
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Senior-author persona requires 44px minimum touch targets on every
interactive control. The /geschichten filter row had three pills
(All / chip / + Person wählen) at h-9 (36px), missing the rule that
the toolbar already follows. Bumped all three to h-11.

Test added in page.svelte.spec.ts asserts the className contains
h-11 on every pill variant.

Addresses Leonie's iteration-3 concern #6 on PR #382.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/routes/geschichten/+page.svelte  |  6 +++---
 .../routes/geschichten/page.svelte.spec.ts    | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/geschichten/+page.svelte b/frontend/src/routes/geschichten/+page.svelte
index dd6240da..da5a4334 100644
--- a/frontend/src/routes/geschichten/+page.svelte
+++ b/frontend/src/routes/geschichten/+page.svelte
@@ -70,7 +70,7 @@ function publishedAt(g: { publishedAt?: string }): string | null {
 			type="button"
 			aria-pressed={!hasFilters}
 			onclick={clearAll}
-			class="inline-flex h-9 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted aria-pressed:bg-ink aria-pressed:text-primary-fg"
+			class="inline-flex h-11 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted aria-pressed:bg-ink aria-pressed:text-primary-fg"
 		>
 			{m.geschichten_filter_all_pill()}
 		</button>
@@ -81,7 +81,7 @@ function publishedAt(g: { publishedAt?: string }): string | null {
 				aria-pressed="true"
 				aria-label={m.geschichten_filter_remove_chip({ name: p.displayName })}
 				onclick={() => removePerson(p.id!)}
-				class="inline-flex h-9 items-center gap-2 rounded-full bg-ink px-3 font-sans text-xs font-bold tracking-wider text-primary-fg uppercase"
+				class="inline-flex h-11 items-center gap-2 rounded-full bg-ink px-3 font-sans text-xs font-bold tracking-wider text-primary-fg uppercase"
 			>
 				{p.displayName}
 				<span aria-hidden="true">×</span>
@@ -92,7 +92,7 @@ function publishedAt(g: { publishedAt?: string }): string | null {
 			type="button"
 			aria-expanded={showPersonPicker}
 			onclick={() => (showPersonPicker = !showPersonPicker)}
-			class="inline-flex h-9 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted"
+			class="inline-flex h-11 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted"
 		>
 			+ {m.geschichten_filter_choose_person()}
 		</button>
diff --git a/frontend/src/routes/geschichten/page.svelte.spec.ts b/frontend/src/routes/geschichten/page.svelte.spec.ts
index f1c2d104..f5f7621e 100644
--- a/frontend/src/routes/geschichten/page.svelte.spec.ts
+++ b/frontend/src/routes/geschichten/page.svelte.spec.ts
@@ -99,4 +99,25 @@ describe('geschichten page — multi-person filter chips', () => {
 		});
 		await expect.element(page.getByRole('button', { name: /Person wählen/ })).toBeVisible();
 	});
+
+	it('renders all filter pills with a 44px touch target (h-11)', async () => {
+		render(Page, {
+			data: makeData({
+				personFilters: [person('a', 'Anna A')] as PageData['personFilters']
+			})
+		});
+
+		// All three pill variants must use h-11 (44px) per the senior-author touch-target rule
+		const all = page.getByRole('button', { name: 'Alle' });
+		const chip = page.getByRole('button', { name: /Anna A aus Filter entfernen/ });
+		const add = page.getByRole('button', { name: /Person wählen/ });
+
+		const allEl = (await all.element()) as HTMLElement;
+		const chipEl = (await chip.element()) as HTMLElement;
+		const addEl = (await add.element()) as HTMLElement;
+
+		expect(allEl.className).toContain('h-11');
+		expect(chipEl.className).toContain('h-11');
+		expect(addEl.className).toContain('h-11');
+	});
 });