marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(search): enlarge sub-12px text for senior legibility (#739 review)

Browse Source 
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>
This commit is contained in:
Marcel
2026-06-06 18:26:24 +02:00
parent 230f23e37c
commit 0058b297d8
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/routes/search/SmartModeToggle.svelte
View File

@@ -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" />

2
frontend/src/routes/search/SmartSearchStatus.svelte
View File

@@ -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>