From 0058b297d87b5b5ce2be2a3a24be33551d5282a0 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 6 Jun 2026 18:26:24 +0200
Subject: [PATCH] fix(search): enlarge sub-12px text for senior legibility
 (#739 review)

Leonie (UX): the toggle pill (text-[7.5px]) and loading subtitle
(text-[9px]) were below the 12px floor for the 60+ audience. Bump both
to text-xs and the toggle icon to h-3.5/w-3.5. Overrides the visual
spec's tokens, which conflicted with the issue's own legibility mandate.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/routes/search/SmartModeToggle.svelte   | 4 ++--
 frontend/src/routes/search/SmartSearchStatus.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/search/SmartModeToggle.svelte b/frontend/src/routes/search/SmartModeToggle.svelte
index bb9f7c35..a7155bcc 100644
--- a/frontend/src/routes/search/SmartModeToggle.svelte
+++ b/frontend/src/routes/search/SmartModeToggle.svelte
@@ -19,7 +19,7 @@ function toggle() {
 	type="button"
 	aria-pressed={smartMode}
 	onclick={toggle}
-	class="pointer-events-auto absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer items-center gap-1.5 rounded-full px-2.5 py-1 text-[7.5px] font-bold uppercase outline-none focus-visible:ring-2 focus-visible:ring-brand-navy {smartMode
+	class="pointer-events-auto absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold uppercase outline-none focus-visible:ring-2 focus-visible:ring-brand-navy {smartMode
 		? 'border border-primary bg-primary text-primary-fg'
 		: 'border border-line bg-muted text-ink-2'}"
 >
@@ -27,7 +27,7 @@ function toggle() {
 		aria-hidden="true"
 		viewBox="0 0 24 24"
 		fill="currentColor"
-		class="h-2.5 w-2.5"
+		class="h-3.5 w-3.5"
 		xmlns="http://www.w3.org/2000/svg"
 	>
 		<path d="M12 2l2.09 6.26L20 10l-5.91 1.74L12 18l-2.09-6.26L4 10l5.91-1.74L12 2z" />
diff --git a/frontend/src/routes/search/SmartSearchStatus.svelte b/frontend/src/routes/search/SmartSearchStatus.svelte
index 80a0a1d5..d6444a7e 100644
--- a/frontend/src/routes/search/SmartSearchStatus.svelte
+++ b/frontend/src/routes/search/SmartSearchStatus.svelte
@@ -33,7 +33,7 @@ const body = $derived(
 			class="h-9 w-9 rounded-full border-[3px] border-primary/12 border-t-primary motion-safe:animate-spin"
 		></div>
 		<p class="text-sm font-bold text-ink">{m.search_loading_nl()}</p>
-		<p class="max-w-xs text-[9px] text-ink-3 motion-safe:animate-pulse">
+		<p class="max-w-xs text-xs text-ink-3 motion-safe:animate-pulse">
 			{m.search_loading_nl_sub()}
 		</p>
 	</div>