From 2b8032524df12d761563b90edb6ea7d67103fb7d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 22 Apr 2026 14:34:31 +0200
Subject: [PATCH] fix(nav): restore DocumentTopBar back button sizing and add
 right padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BackButton gains showLabel prop: showLabel=false renders icon-only with
  aria-label, no mr-2 on svg (was causing 0px button width in topbar)
- DocumentTopBar: BackButton restored to h-11 w-11 circular touch target
  with showLabel=false matching the original 44×44px <a> it replaced
- Topbar row gets pr-4 (16px right padding per spec); action buttons div
  no longer needs its own pr-3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/BackButton.svelte         | 7 ++++---
 frontend/src/lib/components/BackButton.svelte.spec.ts | 7 +++++++
 frontend/src/lib/components/DocumentTopBar.svelte     | 9 ++++++---
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/BackButton.svelte b/frontend/src/lib/components/BackButton.svelte
index 622cd726..7108f02f 100644
--- a/frontend/src/lib/components/BackButton.svelte
+++ b/frontend/src/lib/components/BackButton.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-let { class: cls = 'mb-4' }: { class?: string } = $props();
+let { class: cls = 'mb-4', showLabel = true }: { class?: string; showLabel?: boolean } = $props();
 </script>
 
 <button
 	type="button"
 	onclick={() => history.back()}
+	aria-label={!showLabel ? m.btn_back() : undefined}
 	class="group {cls} inline-flex min-h-[44px] items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring"
 >
 	<svg
-		class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+		class="{showLabel ? 'mr-2' : ''} h-4 w-4 transform transition-transform group-hover:-translate-x-1"
 		fill="none"
 		stroke="currentColor"
 		viewBox="0 0 24 24"
@@ -22,5 +23,5 @@ let { class: cls = 'mb-4' }: { class?: string } = $props();
 			d="M10 19l-7-7m0 0l7-7m-7 7h18"
 		/>
 	</svg>
-	{m.btn_back()}
+	{#if showLabel}{m.btn_back()}{/if}
 </button>
diff --git a/frontend/src/lib/components/BackButton.svelte.spec.ts b/frontend/src/lib/components/BackButton.svelte.spec.ts
index 5df58856..4d00cb5b 100644
--- a/frontend/src/lib/components/BackButton.svelte.spec.ts
+++ b/frontend/src/lib/components/BackButton.svelte.spec.ts
@@ -33,4 +33,11 @@ describe('BackButton', () => {
 		expect(btn?.className).toContain('mr-3');
 		expect(btn?.className).not.toContain('mb-4');
 	});
+
+	it('hides label text and sets aria-label when showLabel is false', async () => {
+		render(BackButton, { props: { showLabel: false } });
+		const btn = document.querySelector('button');
+		expect(btn?.textContent?.trim()).toBe('');
+		expect(btn?.getAttribute('aria-label')).toMatch(/zurück/i);
+	});
 });
diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index 614ae9f5..f352364a 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -129,12 +129,15 @@ let mobileMenuOpen = $state(false);
 
 <div data-topbar class="relative z-10 border-b border-line bg-surface shadow-sm">
 	<!-- Main row -->
-	<div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
+	<div class="flex h-[75px] shrink-0 items-center pr-4 xs:h-[88px]">
 		<!-- Accent bar -->
 		<div class="h-full w-[3px] shrink-0 bg-primary"></div>
 
 		<!-- Back button -->
-		<BackButton class="-ml-0.5 shrink-0" />
+		<BackButton
+			class="-ml-0.5 h-11 w-11 shrink-0 justify-center rounded-full hover:bg-muted"
+			showLabel={false}
+		/>
 
 		<!-- Divider -->
 		<div class="mx-2 h-6 w-px shrink-0 bg-line"></div>
@@ -190,7 +193,7 @@ let mobileMenuOpen = $state(false);
 		<div class="mx-3 hidden h-6 w-px shrink-0 bg-line md:block"></div>
 
 		<!-- Action buttons -->
-		<div class="flex shrink-0 items-center gap-1.5 pr-3 font-sans">
+		<div class="flex shrink-0 items-center gap-1.5 font-sans">
 			{#if canWrite && isPdf && !transcribeMode}
 				{@render transcribeBtn(false)}
 			{/if}