From a3a7af123dbca991f2f30a46be87588a74539bd3 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 14:35:47 +0200
Subject: [PATCH] fix(korrespondenz): scale up strip rows to readable sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Spec measurements (7px/8px/9px text) were spec-document zoom artifacts — not
viable at real browser scale. Updated to readable compact sizes:
- Row 1 compact label: text-xs (12px) uppercase instead of 7px
- Row 1 input: h-9 text-sm (36px/14px) instead of 30px/9px
- Row 1 swap button: h-9 w-9 to align with taller inputs
- Row 2 date inputs: h-8 text-xs (32px/12px) instead of 22px/8px
- Row 2 label/count/sort: text-xs instead of 7px/8px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/PersonTypeahead.svelte     |  4 ++--
 .../korrespondenz/CorrespondenzFilterControls.svelte   | 10 +++++-----
 .../routes/korrespondenz/CorrespondenzPersonBar.svelte |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte
index befe47d6..9e9f7971 100644
--- a/frontend/src/lib/components/PersonTypeahead.svelte
+++ b/frontend/src/lib/components/PersonTypeahead.svelte
@@ -130,7 +130,7 @@ function clickOutside(node: HTMLElement) {
 	<label
 		for={name}
 		class={compact
-			? 'block text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase'
+			? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
 			: 'block text-sm font-medium text-ink-2'}
 		>{label}</label
 	>
@@ -146,7 +146,7 @@ function clickOutside(node: HTMLElement) {
 		onfocus={handleFocus}
 		placeholder={placeholder ?? m.comp_typeahead_placeholder()}
 		class={compact
-			? 'block h-[30px] w-full rounded-[3px] border-[1.5px] border-line bg-surface px-[7px] text-[9px] text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
+			? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
 			: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'}
 	/>
 
diff --git a/frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte b/frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte
index 6c662741..24fd4442 100644
--- a/frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte
+++ b/frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte
@@ -39,7 +39,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 	aria-disabled={!senderId}
 >
 	<!-- Period label -->
-	<span class="hidden text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase sm:block">
+	<span class="hidden text-xs font-bold tracking-wide text-ink-3 uppercase sm:block">
 		{conv_strip_period()}
 	</span>
 
@@ -50,7 +50,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		onchange={() => onapplyFilters()}
 		placeholder={conv_strip_from_placeholder()}
 		aria-label="Von"
-		class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0"
+		class="h-8 min-h-[44px] w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none sm:min-h-0"
 		class:border-primary={!!fromDate}
 		class:border-line={!fromDate}
 	/>
@@ -64,7 +64,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		onchange={() => onapplyFilters()}
 		placeholder={conv_strip_to_placeholder()}
 		aria-label="Bis"
-		class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0"
+		class="h-8 min-h-[44px] w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none sm:min-h-0"
 		class:border-primary={!!toDate}
 		class:border-line={!toDate}
 	/>
@@ -72,7 +72,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 	<!-- Document count -->
 	<span
 		data-testid="conv-strip-count"
-		class="ml-auto text-[8px] font-bold"
+		class="ml-auto text-xs font-bold"
 		class:text-primary={hasDateFilter}
 		class:text-ink-3={!hasDateFilter}
 	>
@@ -86,7 +86,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		aria-label="Sortierung umkehren"
 		aria-pressed={sortDir === 'ASC'}
 		onclick={ontoggleSort}
-		class="flex h-[22px] min-h-[44px] items-center gap-1 rounded-[3px] border-[1.5px] px-2 text-[8px] font-bold sm:min-h-0"
+		class="flex h-8 min-h-[44px] items-center gap-1 rounded border px-3 text-xs font-bold sm:min-h-0"
 		class:border-primary={isActive}
 		class:text-primary={isActive}
 		class:border-line={!isActive}
diff --git a/frontend/src/routes/korrespondenz/CorrespondenzPersonBar.svelte b/frontend/src/routes/korrespondenz/CorrespondenzPersonBar.svelte
index 461812ed..a411642e 100644
--- a/frontend/src/routes/korrespondenz/CorrespondenzPersonBar.svelte
+++ b/frontend/src/routes/korrespondenz/CorrespondenzPersonBar.svelte
@@ -55,7 +55,7 @@ function handleSuggestionSelect(id: string) {
 		type="button"
 		aria-label="Personen tauschen"
 		onclick={onswapPersons}
-		class="mb-[1px] flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[3px] border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary"
+		class="flex h-9 w-9 shrink-0 items-center justify-center rounded border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary"
 		class:opacity-0={!swapVisible}
 		class:pointer-events-none={!swapVisible}
 		tabindex={swapVisible ? 0 : -1}