From 367dcc66f251f5708302935830fcbe077f307d96 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 22 Apr 2026 11:16:49 +0200
Subject: [PATCH] refactor(nav): add class prop to BackButton, remove mb-4 from
 topbar contexts

- BackButton now accepts a `class` prop (default 'mb-4') so callers can
  override spacing; resolves hardcoded margin in flex-row topbar snippets
- documents/[id]/edit and enrich/[id] pass class="" to suppress the margin
- Replace weak className unit test with class-prop behaviour tests
- Add [data-hydrated] comment in E2E spec explaining what emits the attribute

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/back-button.spec.ts                      |  3 +++
 frontend/src/lib/components/BackButton.svelte         |  3 ++-
 frontend/src/lib/components/BackButton.svelte.spec.ts | 11 +++++++++--
 frontend/src/routes/documents/[id]/edit/+page.svelte  |  2 +-
 frontend/src/routes/enrich/[id]/+page.svelte          |  2 +-
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/e2e/back-button.spec.ts b/frontend/e2e/back-button.spec.ts
index 4bfa0f66..dcc94bd8 100644
--- a/frontend/e2e/back-button.spec.ts
+++ b/frontend/e2e/back-button.spec.ts
@@ -1,6 +1,9 @@
 import AxeBuilder from '@axe-core/playwright';
 import { test, expect } from '@playwright/test';
 
+// [data-hydrated] is set by +layout.svelte once SvelteKit's client-side hydration is complete.
+// Waiting on it ensures the component is interactive before we interact with it.
+
 test.describe('BackButton — navigation', () => {
 	test('returns to previous page via history when clicked', async ({ page }) => {
 		// Navigate to persons list, then to a person detail
diff --git a/frontend/src/lib/components/BackButton.svelte b/frontend/src/lib/components/BackButton.svelte
index 4b2edbaf..622cd726 100644
--- a/frontend/src/lib/components/BackButton.svelte
+++ b/frontend/src/lib/components/BackButton.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+let { class: cls = 'mb-4' }: { class?: string } = $props();
 </script>
 
 <button
 	type="button"
 	onclick={() => history.back()}
-	class="group mb-4 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"
+	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"
diff --git a/frontend/src/lib/components/BackButton.svelte.spec.ts b/frontend/src/lib/components/BackButton.svelte.spec.ts
index ce714912..5df58856 100644
--- a/frontend/src/lib/components/BackButton.svelte.spec.ts
+++ b/frontend/src/lib/components/BackButton.svelte.spec.ts
@@ -21,9 +21,16 @@ describe('BackButton', () => {
 		backSpy.mockRestore();
 	});
 
-	it('has min-h-[44px] for touch target compliance', async () => {
+	it('applies mb-4 by default', async () => {
 		render(BackButton);
 		const btn = document.querySelector('button');
-		expect(btn?.className).toContain('min-h-[44px]');
+		expect(btn?.className).toContain('mb-4');
+	});
+
+	it('applies custom class prop instead of default', async () => {
+		render(BackButton, { props: { class: 'mr-3 md:hidden' } });
+		const btn = document.querySelector('button');
+		expect(btn?.className).toContain('mr-3');
+		expect(btn?.className).not.toContain('mb-4');
 	});
 });
diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index abf00423..fcd0f2a9 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -27,7 +27,7 @@ async function handleDelete() {
 
 <DocumentEditLayout doc={doc} formId="update-form" formAction="?/update" formError={form?.error}>
 	{#snippet topbar()}
-		<BackButton />
+		<BackButton class="" />
 
 		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
 			{doc.title || doc.originalFilename}
diff --git a/frontend/src/routes/enrich/[id]/+page.svelte b/frontend/src/routes/enrich/[id]/+page.svelte
index 05a13d67..0d7e22d8 100644
--- a/frontend/src/routes/enrich/[id]/+page.svelte
+++ b/frontend/src/routes/enrich/[id]/+page.svelte
@@ -15,7 +15,7 @@ const doc = $derived(data.document);
 
 <DocumentEditLayout doc={doc} formId="save-form" formAction="?/save" formError={form?.error}>
 	{#snippet topbar()}
-		<BackButton />
+		<BackButton class="" />
 
 		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
 			{doc.title || doc.originalFilename}