From a570dff4e93ca65e33000588a50d552e6fd0dda5 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 27 Mar 2026 16:11:47 +0100
Subject: [PATCH] fix(#95): stack save bar buttons full-width on mobile to
 prevent text wrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Long button labels (e.g. German "Speichern & Als überprüft markieren")
require ~515px at text-xs tracking-widest — impossible at 320px inline.

Both save bars (new document + edit document) now use flex-col on mobile
with w-full buttons and flex-row on sm+. Primary actions appear first
(top on mobile, right on desktop). Also fixes hardcoded border-gray-300/
text-gray-600 → border-line/text-ink-2 and bg-brand-navy/text-white →
bg-primary/text-primary-fg in these two components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../routes/documents/[id]/edit/SaveBar.svelte | 124 +++++++++---------
 .../src/routes/documents/new/+page.svelte     |  49 +++----
 2 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
index 56b66d47..17195ce5 100644
--- a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
+++ b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
@@ -7,73 +7,79 @@ let confirmDelete = $state(false);
 </script>
 
 <div
-	class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+	class="sticky bottom-0 z-10 -mx-4 border-t border-line bg-surface px-4 py-3 shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6 sm:py-4"
 >
-	<!-- Left: delete -->
-	<div class="flex items-center gap-3">
-		{#if confirmDelete}
-			<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
+	<!-- Desktop: delete left, cancel+buttons right -->
+	<!-- Mobile: action buttons stacked full-width, delete+cancel row at bottom -->
+	<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+		<!-- Primary actions first (top on mobile, right on desktop) -->
+		<div class="flex flex-col gap-2 sm:order-last sm:flex-row sm:items-center sm:gap-4">
 			<button
 				type="submit"
-				form="delete-form"
-				class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
+				form="mark-for-review-form"
+				class="w-full rounded-sm border border-line px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted sm:w-auto sm:py-2"
 			>
-				{m.btn_delete()}
+				{m.btn_mark_for_review()}
 			</button>
 			<button
-				type="button"
-				onclick={() => (confirmDelete = false)}
-				class="text-sm text-ink-2 transition-colors hover:text-ink"
+				type="submit"
+				class="w-full rounded bg-primary px-6 py-2.5 font-sans text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80 sm:w-auto sm:py-2"
 			>
-				{m.btn_cancel()}
+				{m.btn_save()}
 			</button>
-		{:else}
-			<button
-				type="button"
-				onclick={() => (confirmDelete = true)}
-				class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					aria-hidden="true"
-				>
-					<polyline points="3 6 5 6 21 6" />
-					<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-					<path d="M10 11v6M14 11v6" />
-					<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-				</svg>
-				{m.btn_delete()}
-			</button>
-		{/if}
-	</div>
+		</div>
 
-	<!-- Right: cancel + mark for review + save -->
-	<div class="flex items-center gap-4">
-		<a
-			href="/documents/{docId}"
-			class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-		>
-			{m.btn_cancel()}
-		</a>
-		<button
-			type="submit"
-			form="mark-for-review-form"
-			class="rounded-sm border border-gray-300 px-4 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
-		>
-			{m.btn_mark_for_review()}
-		</button>
-		<button
-			type="submit"
-			class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
-		>
-			{m.btn_save()}
-		</button>
+		<!-- Secondary: delete + cancel (row on both mobile and desktop) -->
+		<div class="flex items-center justify-between sm:justify-start sm:gap-4">
+			{#if confirmDelete}
+				<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
+				<div class="flex items-center gap-3">
+					<button
+						type="submit"
+						form="delete-form"
+						class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
+					>
+						{m.btn_delete()}
+					</button>
+					<button
+						type="button"
+						onclick={() => (confirmDelete = false)}
+						class="text-sm text-ink-2 transition-colors hover:text-ink"
+					>
+						{m.btn_cancel()}
+					</button>
+				</div>
+			{:else}
+				<button
+					type="button"
+					onclick={() => (confirmDelete = true)}
+					class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<polyline points="3 6 5 6 21 6" />
+						<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+						<path d="M10 11v6M14 11v6" />
+						<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+					</svg>
+					{m.btn_delete()}
+				</button>
+				<a
+					href="/documents/{docId}"
+					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+				>
+					{m.btn_cancel()}
+				</a>
+			{/if}
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/documents/new/+page.svelte b/frontend/src/routes/documents/new/+page.svelte
index 6699a4c5..5bfd3ccb 100644
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -120,30 +120,35 @@ $effect(() => {
 
 		<!-- Sticky Save Bar -->
 		<div
-			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+			class="sticky bottom-0 z-10 -mx-4 border-t border-line bg-surface px-4 py-3 shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6 sm:py-4"
 		>
-			<a href="/" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
-				{m.btn_cancel()}
-			</a>
-			<div class="flex items-center gap-3">
-				<button
-					type="submit"
-					name="metadataComplete"
-					value="false"
-					formaction="?/save"
-					class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+				<a
+					href="/"
+					class="order-last text-center text-sm font-medium text-ink-2 transition-colors hover:text-ink sm:order-first sm:text-left"
 				>
-					{m.btn_save()}
-				</button>
-				<button
-					type="submit"
-					name="metadataComplete"
-					value="true"
-					formaction="?/saveReviewed"
-					class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
-				>
-					{m.btn_save_and_mark_reviewed()}
-				</button>
+					{m.btn_cancel()}
+				</a>
+				<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+					<button
+						type="submit"
+						name="metadataComplete"
+						value="false"
+						formaction="?/save"
+						class="w-full rounded-sm border border-line px-5 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted sm:w-auto sm:py-2"
+					>
+						{m.btn_save()}
+					</button>
+					<button
+						type="submit"
+						name="metadataComplete"
+						value="true"
+						formaction="?/saveReviewed"
+						class="w-full rounded-sm bg-primary px-5 py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90 sm:w-auto sm:py-2"
+					>
+						{m.btn_save_and_mark_reviewed()}
+					</button>
+				</div>
 			</div>
 		</div>
 	</form>