From 281934529e0253f0570c91de31d3338cfc186fc7 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:54:04 +0200
Subject: [PATCH] fix(header): consistent icon styling, focus rings, and
 responsive breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Normalize all header icon buttons to white/65 + white/10 hover bg
- Fix guest person icon (img tag needs brightness-0 invert, not text color)
- Add missing focus-visible rings to ThemeToggle and LanguageSwitcher
- Use focus-visible:rounded on nav links so active underline stays sharp
- Bump burger/nav breakpoint from sm→lg to prevent overflow on tablets

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/LanguageSwitcher.svelte     |  2 +-
 .../src/lib/components/NotificationBell.svelte     |  2 +-
 frontend/src/lib/components/ThemeToggle.svelte     |  6 +++---
 frontend/src/routes/+layout.svelte                 |  2 +-
 frontend/src/routes/AppNav.svelte                  | 14 +++++++-------
 frontend/src/routes/UserMenu.svelte                |  4 ++--
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/LanguageSwitcher.svelte b/frontend/src/lib/components/LanguageSwitcher.svelte
index 7c0ac134..45bc5885 100644
--- a/frontend/src/lib/components/LanguageSwitcher.svelte
+++ b/frontend/src/lib/components/LanguageSwitcher.svelte
@@ -12,7 +12,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 	<button
 		type="button"
 		onclick={() => setLocale(localeMap[locale])}
-		class="font-sans tracking-widest transition-colors
+		class="rounded px-1 font-sans tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                {activeLocale === locale
 			? inverted
 				? 'font-bold text-white'
diff --git a/frontend/src/lib/components/NotificationBell.svelte b/frontend/src/lib/components/NotificationBell.svelte
index cb62dbfa..30219dce 100644
--- a/frontend/src/lib/components/NotificationBell.svelte
+++ b/frontend/src/lib/components/NotificationBell.svelte
@@ -154,7 +154,7 @@ onDestroy(() => {
 			: m.notification_bell_label()}
 		aria-expanded={open}
 		aria-haspopup="true"
-		class="relative rounded-sm p-2 text-ink-2 transition-colors hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+		class="relative rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
 	>
 		<!-- Bell SVG -->
 		<svg
diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte
index de85adb1..dd749944 100644
--- a/frontend/src/lib/components/ThemeToggle.svelte
+++ b/frontend/src/lib/components/ThemeToggle.svelte
@@ -31,12 +31,12 @@ function toggle() {
 	onclick={toggle}
 	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
 	title={theme === 'dark' ? 'light mode' : 'dark mode'}
-	class="rounded p-1.5 text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
 >
 	{#if theme === 'dark'}
 		<!-- Sun icon — click to go light -->
 		<svg
-			class="h-4 w-4"
+			class="h-5 w-5"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -52,7 +52,7 @@ function toggle() {
 	{:else}
 		<!-- Moon icon — click to go dark -->
 		<svg
-			class="h-4 w-4"
+			class="h-5 w-5"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d0f6b92c..8110cc69 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -46,7 +46,7 @@ const userInitials = $derived.by(() => {
 					<div class="flex items-center gap-3">
 						<!-- Language selector (desktop only — mobile lives in nav drawer) -->
 						<div
-							class="hidden items-center gap-1 pr-3 sm:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
+							class="hidden items-center gap-1 pr-3 lg:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
 						>
 							<LanguageSwitcher inverted />
 						</div>
diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 24ecbd0f..7744ca3f 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -38,10 +38,10 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 	</div>
 
 	<!-- Desktop nav -->
-	<nav class="hidden items-stretch sm:flex sm:space-x-1">
+	<nav class="hidden items-stretch lg:flex lg:space-x-1">
 		<a
 			href="/"
-			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/55 hover:text-white/85'}"
@@ -51,7 +51,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 		<a
 			href="/persons"
-			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/persons')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/55 hover:text-white/85'}"
@@ -61,7 +61,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 		<a
 			href="/korrespondenz"
-			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/korrespondenz')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/55 hover:text-white/85'}"
@@ -71,7 +71,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 		{#if isAdmin}
 			<a
 				href="/admin"
-				class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+				class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/admin')
 					? 'border-b-2 border-accent text-white'
 					: 'text-white/55 hover:text-white/85'}"
@@ -83,7 +83,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 	<!-- Hamburger toggle (mobile only) -->
 	<button
-		class="ml-auto flex h-11 w-11 items-center justify-center rounded text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent sm:hidden"
+		class="ml-auto flex h-11 w-11 items-center justify-center self-center rounded text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent lg:hidden"
 		aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
 		aria-expanded={mobileNavOpen}
 		aria-controls="mobile-nav"
@@ -131,7 +131,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 <!-- Mobile nav overlay -->
 {#if mobileNavOpen}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="fixed inset-0 top-[68px] z-40 sm:hidden" onkeydown={handleOverlayKeydown}>
+	<div class="fixed inset-0 top-[68px] z-40 lg:hidden" onkeydown={handleOverlayKeydown}>
 		<!-- Backdrop -->
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
diff --git a/frontend/src/routes/UserMenu.svelte b/frontend/src/routes/UserMenu.svelte
index d803caea..5da50c54 100644
--- a/frontend/src/routes/UserMenu.svelte
+++ b/frontend/src/routes/UserMenu.svelte
@@ -44,13 +44,13 @@ function clickOutside(node: HTMLElement) {
 			aria-expanded={userMenuOpen}
 			aria-haspopup="true"
 			onclick={() => (userMenuOpen = !userMenuOpen)}
-			class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-white/60 uppercase transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+			class="group rounded-sm p-2 transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
 		>
 			<img
 				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
 				alt=""
 				aria-hidden="true"
-				class="h-4 w-4 opacity-50"
+				class="h-5 w-5 opacity-65 brightness-0 invert transition-opacity group-hover:opacity-100"
 			/>
 		</button>
 	{/if}