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

@@ -9,39 +9,41 @@ let { data }: { data: PageData } = $props();
 const { trainingInfo } = $derived(data);
 </script>
 
-<div class="flex flex-col gap-6 p-6">
+<div class="flex-1 overflow-y-auto p-6">
-	<!-- Page title + health bar -->
+	<div class="mx-auto flex max-w-4xl flex-col gap-6">
-	<div class="flex items-center justify-between">
+		<!-- Page title + health bar -->
-		<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
+		<div class="flex items-center justify-between">
-			{m.admin_tab_ocr()}
+			<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
-		</h1>
+				{m.admin_tab_ocr()}
-		<OcrHealthBar ocrServiceAvailable={trainingInfo.ocrServiceAvailable ?? false} />
+			</h1>
-	</div>
+			<OcrHealthBar ocrServiceAvailable={trainingInfo.ocrServiceAvailable ?? false} />
-
-	<!-- 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 ?? []}
+		<!-- Stats -->
-			personNames={trainingInfo.personNames ?? {}}
+		<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>

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-1 overflow-y-auto p-6">
-	<div class="flex items-center gap-4">
+	<div class="mx-auto flex max-w-4xl flex-col gap-6">
-		<a
+		<div class="flex items-center gap-4">
-			href="/admin/ocr"
+			<a
-			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"
+				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
 			>
-			{m.admin_tab_ocr()}
+				<svg
-		</a>
+					class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-		<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
+					fill="none"
-			{personName}
+					viewBox="0 0 24 24"
-		</h1>
+					stroke="currentColor"
-	</div>
+					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>

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-1 overflow-y-auto p-6">
-	<div class="flex items-center gap-4">
+	<div class="mx-auto flex max-w-4xl flex-col gap-6">
-		<a
+		<div class="flex items-center gap-4">
-			href="/admin/ocr"
+			<a
-			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"
+				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
 			>
-			{m.admin_tab_ocr()}
+				<svg
-		</a>
+					class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-		<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
+					fill="none"
-			{m.ocr_global_history_heading()}
+					viewBox="0 0 24 24"
-		</h1>
+					stroke="currentColor"
-	</div>
+					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>