fix(#95): stack save bar buttons full-width on mobile to prevent text wrap

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>

frontend/src/routes/documents/[id]/edit/SaveBar.svelte

@@ -7,12 +7,33 @@ 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 -->
+	<!-- Desktop: delete left, cancel+buttons right -->
-	<div class="flex items-center gap-3">
+	<!-- 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="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_mark_for_review()}
+			</button>
+			<button
+				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_save()}
+			</button>
+		</div>
+
+		<!-- 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"
@@ -27,6 +48,7 @@ let confirmDelete = $state(false);
 					>
 						{m.btn_cancel()}
 					</button>
+				</div>
 			{:else}
 				<button
 					type="button"
@@ -51,29 +73,13 @@ let confirmDelete = $state(false);
 					</svg>
 					{m.btn_delete()}
 				</button>
-		{/if}
-	</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
+			{/if}
-			type="submit"
+		</div>
-			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>
 	</div>
 </div>

frontend/src/routes/documents/new/+page.svelte

@@ -120,18 +120,22 @@ $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"
+		>
+			<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"
 				>
-			<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">
+				<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="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"
+						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>
@@ -140,11 +144,12 @@ $effect(() => {
 						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"
+						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>
 </div>