From 7f2940f0f26c4ad1df61a6bd5bebdf03a461d7c8 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 1 Apr 2026 09:12:27 +0200
Subject: [PATCH] feat(topbar): increase all font sizes and bar height by
 another 25%

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/AnnotateHintStrip.svelte   | 6 +++---
 frontend/src/lib/components/DocumentStatusChip.svelte  | 2 +-
 frontend/src/lib/components/DocumentTopBar.svelte      | 6 +++---
 frontend/src/lib/components/OverflowPillButton.svelte  | 6 +++---
 frontend/src/lib/components/OverflowPillDisplay.svelte | 2 +-
 frontend/src/lib/components/PersonChip.svelte          | 4 ++--
 frontend/src/lib/components/PersonChipRow.svelte       | 2 +-
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/AnnotateHintStrip.svelte b/frontend/src/lib/components/AnnotateHintStrip.svelte
index e90398ce..03a46e1b 100644
--- a/frontend/src/lib/components/AnnotateHintStrip.svelte
+++ b/frontend/src/lib/components/AnnotateHintStrip.svelte
@@ -9,10 +9,10 @@ let { annotateMode }: Props = $props();
 {#if annotateMode}
 	<div
 		data-testid="annotate-hint-strip"
-		class="hidden h-[23px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
+		class="hidden h-[29px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
 		style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)"
 	>
-		<span class="text-[13px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
-		<span class="text-[13px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
+		<span class="text-[16px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
+		<span class="text-[16px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/DocumentStatusChip.svelte b/frontend/src/lib/components/DocumentStatusChip.svelte
index 7b07f536..05857ebc 100644
--- a/frontend/src/lib/components/DocumentStatusChip.svelte
+++ b/frontend/src/lib/components/DocumentStatusChip.svelte
@@ -14,7 +14,7 @@ const label = $derived(statusLabel(status));
 </script>
 
 <span
-	class="hidden shrink-0 md:block {dotClass} h-3 w-3 rounded-full"
+	class="hidden shrink-0 md:block {dotClass} h-4 w-4 rounded-full"
 	title={label}
 	aria-label={label}
 ></span>
diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index 3232b27a..0922c014 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -42,7 +42,7 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
 
 <div data-topbar class="border-b border-line bg-surface shadow-sm">
 	<!-- Main row -->
-	<div class="flex h-[60px] shrink-0 items-center xs:h-[70px]">
+	<div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
 		<!-- Accent bar -->
 		<div class="h-full w-[3px] shrink-0 bg-primary"></div>
 
@@ -66,13 +66,13 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
 		<!-- Title + meta -->
 		<div class="min-w-0 flex-1 overflow-hidden">
 			<h1
-				class="truncate font-serif text-[14px] leading-tight text-ink lg:text-[16px]"
+				class="truncate font-serif text-[18px] leading-tight text-ink lg:text-[20px]"
 				title={doc.title ?? doc.originalFilename ?? ''}
 			>
 				{doc.title || doc.originalFilename}
 			</h1>
 			{#if shortDate}
-				<p class="font-sans text-[13px] text-ink-2">
+				<p class="font-sans text-[16px] text-ink-2">
 					<span class="lg:hidden">{shortDate}</span>
 					<span class="hidden lg:inline">{longDate}</span>
 				</p>
diff --git a/frontend/src/lib/components/OverflowPillButton.svelte b/frontend/src/lib/components/OverflowPillButton.svelte
index 9309653c..f3e59d74 100644
--- a/frontend/src/lib/components/OverflowPillButton.svelte
+++ b/frontend/src/lib/components/OverflowPillButton.svelte
@@ -47,7 +47,7 @@ function handleKeydown(e: KeyboardEvent) {
 		aria-label="{extraCount} weitere Empfänger anzeigen"
 		onclick={toggle}
 		onkeydown={handleKeydown}
-		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[11px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
+		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
 	>
 		+{extraCount} weitere
 	</button>
@@ -57,12 +57,12 @@ function handleKeydown(e: KeyboardEvent) {
 			role="list"
 			class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
 		>
-			<p class="mb-2 text-[11px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
+			<p class="mb-2 text-[14px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
 			{#each persons as person (person.id)}
 				<div role="listitem">
 					<a
 						href="/persons/{person.id}"
-						class="block py-0.5 text-[14px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
+						class="block py-0.5 text-[18px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
 					>
 						{person.firstName}
 						{person.lastName}
diff --git a/frontend/src/lib/components/OverflowPillDisplay.svelte b/frontend/src/lib/components/OverflowPillDisplay.svelte
index 3fbae776..a5c68868 100644
--- a/frontend/src/lib/components/OverflowPillDisplay.svelte
+++ b/frontend/src/lib/components/OverflowPillDisplay.svelte
@@ -8,7 +8,7 @@ let { extraCount }: Props = $props();
 
 <span
 	aria-hidden="true"
-	class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[11px] font-bold text-ink-2"
+	class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2"
 >
 	+{extraCount}
 </span>
diff --git a/frontend/src/lib/components/PersonChip.svelte b/frontend/src/lib/components/PersonChip.svelte
index 81afad70..fed326cc 100644
--- a/frontend/src/lib/components/PersonChip.svelte
+++ b/frontend/src/lib/components/PersonChip.svelte
@@ -23,11 +23,11 @@ const initials = $derived(
 	class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5"
 >
 	<span
-		class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
+		class="flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-full text-[13px] font-bold text-white"
 		style="background-color: {avatarColor}"
 		aria-hidden="true"
 	>
 		{initials}
 	</span>
-	<span class="text-[11px] font-semibold text-ink">{displayName}</span>
+	<span class="text-[14px] font-semibold text-ink">{displayName}</span>
 </span>
diff --git a/frontend/src/lib/components/PersonChipRow.svelte b/frontend/src/lib/components/PersonChipRow.svelte
index d3210488..e10b7f0a 100644
--- a/frontend/src/lib/components/PersonChipRow.svelte
+++ b/frontend/src/lib/components/PersonChipRow.svelte
@@ -22,7 +22,7 @@ const visibleReceivers = $derived(receivers.slice(0, 2));
 	{/if}
 
 	{#if sender && receivers.length > 0}
-		<span class="shrink-0 text-[13px] text-ink-2" aria-hidden="true">→</span>
+		<span class="shrink-0 text-[16px] text-ink-2" aria-hidden="true">→</span>
 	{/if}
 
 	{#each visibleReceivers as receiver, i (receiver.id)}