From 8128769feba57fe7a1d4a62e658df0987011ddb9 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 18 Apr 2026 10:33:39 +0200
Subject: [PATCH] style(admin/ocr): center content with max-w-4xl, wrap history
 tables in cards

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/admin/ocr/+page.svelte    | 66 ++++++++++---------
 .../routes/admin/ocr/[personId]/+page.svelte  | 47 +++++++------
 .../src/routes/admin/ocr/global/+page.svelte  | 47 +++++++------
 3 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/frontend/src/routes/admin/ocr/+page.svelte b/frontend/src/routes/admin/ocr/+page.svelte
index f352a030..9d14cc56 100644
--- a/frontend/src/routes/admin/ocr/+page.svelte
+++ b/frontend/src/routes/admin/ocr/+page.svelte
@@ -9,39 +9,41 @@ let { data }: { data: PageData } = $props();
 const { trainingInfo } = $derived(data);
 </script>
 
-<div class="flex flex-col gap-6 p-6">
-	<!-- Page title + health bar -->
-	<div class="flex items-center justify-between">
-		<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
-			{m.admin_tab_ocr()}
-		</h1>
-		<OcrHealthBar ocrServiceAvailable={trainingInfo.ocrServiceAvailable ?? false} />
-	</div>
-
-	<!-- Stats -->
-	<OcrStatCards
-		availableBlocks={trainingInfo.availableBlocks ?? 0}
-		totalOcrBlocks={trainingInfo.totalOcrBlocks ?? 0}
-		availableDocuments={trainingInfo.availableDocuments ?? 0}
-		availableSegBlocks={trainingInfo.availableSegBlocks ?? 0}
-	/>
-
-	<!-- Sender models -->
-	<div>
-		<div class="mb-3 flex items-center justify-between">
-			<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
-				{m.ocr_sender_models_heading()}
-			</h2>
-			<a
-				href="/admin/ocr/global"
-				class="text-xs font-medium text-brand-navy/60 transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
-			>
-				{m.ocr_global_history_link()}
-			</a>
+<div class="flex-1 overflow-y-auto p-6">
+	<div class="mx-auto flex max-w-4xl flex-col gap-6">
+		<!-- Page title + health bar -->
+		<div class="flex items-center justify-between">
+			<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
+				{m.admin_tab_ocr()}
+			</h1>
+			<OcrHealthBar ocrServiceAvailable={trainingInfo.ocrServiceAvailable ?? false} />
 		</div>
-		<OcrModelsTable
-			senderModels={trainingInfo.senderModels ?? []}
-			personNames={trainingInfo.personNames ?? {}}
+
+		<!-- Stats -->
+		<OcrStatCards
+			availableBlocks={trainingInfo.availableBlocks ?? 0}
+			totalOcrBlocks={trainingInfo.totalOcrBlocks ?? 0}
+			availableDocuments={trainingInfo.availableDocuments ?? 0}
+			availableSegBlocks={trainingInfo.availableSegBlocks ?? 0}
 		/>
+
+		<!-- Sender models -->
+		<div>
+			<div class="mb-3 flex items-center justify-between">
+				<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
+					{m.ocr_sender_models_heading()}
+				</h2>
+				<a
+					href="/admin/ocr/global"
+					class="text-xs font-medium text-brand-navy/60 transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+				>
+					{m.ocr_global_history_link()}
+				</a>
+			</div>
+			<OcrModelsTable
+				senderModels={trainingInfo.senderModels ?? []}
+				personNames={trainingInfo.personNames ?? {}}
+			/>
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/admin/ocr/[personId]/+page.svelte b/frontend/src/routes/admin/ocr/[personId]/+page.svelte
index 8392c841..d6afbd7a 100644
--- a/frontend/src/routes/admin/ocr/[personId]/+page.svelte
+++ b/frontend/src/routes/admin/ocr/[personId]/+page.svelte
@@ -7,26 +7,33 @@ let { data }: { data: PageData } = $props();
 const personName = $derived(data.history.personNames?.[data.personId] ?? 'Unknown');
 </script>
 
-<div class="flex flex-col gap-6 p-6">
-	<div class="flex items-center gap-4">
-		<a
-			href="/admin/ocr"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
-		>
-			<svg
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="2"
-				><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg
+<div class="flex-1 overflow-y-auto p-6">
+	<div class="mx-auto flex max-w-4xl flex-col gap-6">
+		<div class="flex items-center gap-4">
+			<a
+				href="/admin/ocr"
+				class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 			>
-			{m.admin_tab_ocr()}
-		</a>
-		<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
-			{personName}
-		</h1>
-	</div>
+				<svg
+					class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+					><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg
+				>
+				{m.admin_tab_ocr()}
+			</a>
+			<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
+				{personName}
+			</h1>
+		</div>
 
-	<TrainingHistory runs={data.history.runs ?? []} personNames={data.history.personNames ?? {}} />
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
+			<TrainingHistory
+				runs={data.history.runs ?? []}
+				personNames={data.history.personNames ?? {}}
+			/>
+		</div>
+	</div>
 </div>
diff --git a/frontend/src/routes/admin/ocr/global/+page.svelte b/frontend/src/routes/admin/ocr/global/+page.svelte
index a6ed04b5..b0991a4e 100644
--- a/frontend/src/routes/admin/ocr/global/+page.svelte
+++ b/frontend/src/routes/admin/ocr/global/+page.svelte
@@ -6,26 +6,33 @@ import * as m from '$lib/paraglide/messages.js';
 let { data }: { data: PageData } = $props();
 </script>
 
-<div class="flex flex-col gap-6 p-6">
-	<div class="flex items-center gap-4">
-		<a
-			href="/admin/ocr"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
-		>
-			<svg
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="2"
-				><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg
+<div class="flex-1 overflow-y-auto p-6">
+	<div class="mx-auto flex max-w-4xl flex-col gap-6">
+		<div class="flex items-center gap-4">
+			<a
+				href="/admin/ocr"
+				class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 			>
-			{m.admin_tab_ocr()}
-		</a>
-		<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
-			{m.ocr_global_history_heading()}
-		</h1>
-	</div>
+				<svg
+					class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+					><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg
+				>
+				{m.admin_tab_ocr()}
+			</a>
+			<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
+				{m.ocr_global_history_heading()}
+			</h1>
+		</div>
 
-	<TrainingHistory runs={data.history.runs ?? []} personNames={data.history.personNames ?? {}} />
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
+			<TrainingHistory
+				runs={data.history.runs ?? []}
+				personNames={data.history.personNames ?? {}}
+			/>
+		</div>
+	</div>
 </div>