From 6aae15969813815d6f78172204429baaca5b2441 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 23 Apr 2026 08:18:50 +0200
Subject: [PATCH] feat(documents): enlarge thumbnail in document-list rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a `size` prop to DocumentThumbnail (default `sm` keeps the existing
60×84 tile used in person sublists; new `lg` is 120×168) and use `lg`
for the main document-list row, where the previous tile occupied less
than half of the row's vertical space.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/lib/components/DocumentRow.svelte     |  2 +-
 .../lib/components/DocumentThumbnail.svelte   | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/DocumentRow.svelte b/frontend/src/lib/components/DocumentRow.svelte
index 0bf9fdfa..3381f49a 100644
--- a/frontend/src/lib/components/DocumentRow.svelte
+++ b/frontend/src/lib/components/DocumentRow.svelte
@@ -40,7 +40,7 @@ function safeTagColor(color: string | null | undefined): string {
 	<a href="/documents/{doc.id}" class="block px-4 py-4 sm:py-5">
 		<div class="flex gap-3 sm:gap-5">
 			<!-- Thumbnail tile -->
-			<DocumentThumbnail doc={doc} />
+			<DocumentThumbnail doc={doc} size="lg" />
 
 			<!-- Left column -->
 			<div class="flex-1 sm:border-r sm:border-line sm:pr-5">
diff --git a/frontend/src/lib/components/DocumentThumbnail.svelte b/frontend/src/lib/components/DocumentThumbnail.svelte
index fe7050c9..ee6023e2 100644
--- a/frontend/src/lib/components/DocumentThumbnail.svelte
+++ b/frontend/src/lib/components/DocumentThumbnail.svelte
@@ -7,21 +7,27 @@ type Doc = Pick<
 	'id' | 'thumbnailKey' | 'thumbnailGeneratedAt' | 'contentType'
 >;
 
-let { doc }: { doc: Doc } = $props();
+let { doc, size = 'sm' }: { doc: Doc; size?: 'sm' | 'lg' } = $props();
 const url = $derived(thumbnailUrl(doc));
+
+const containerClass = $derived(
+	size === 'lg'
+		? 'relative h-[168px] w-[120px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white'
+		: 'relative h-[84px] w-[60px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white'
+);
+const iconClass = $derived(size === 'lg' ? 'h-16 w-16' : 'h-8 w-8');
 </script>
 
 <!--
-	Fixed 60x84 tile used wherever a document row appears. When the backend has
-	generated a thumbnail we render it with `object-cover` + `object-top` so
-	letter salutations stay visible; otherwise we fall back to the file-type
-	icon so the row never shows an empty rectangle. Dark mode uses
-	`mix-blend-multiply` to keep bright paper scans from glaring against the
-	dark page background.
+	Fixed-aspect (5:7, ≈A4) tile used wherever a document row appears. `sm` is
+	60×84 (compact rows, person sublists); `lg` is 120×168 (main document list).
+	When the backend has generated a thumbnail we render it with `object-cover`
+	+ `object-top` so letter salutations stay visible; otherwise we fall back
+	to the file-type icon so the row never shows an empty rectangle. Dark mode
+	uses `mix-blend-multiply` to keep bright paper scans from glaring against
+	the dark page background.
 -->
-<div
-	class="relative h-[84px] w-[60px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white"
->
+<div class={containerClass}>
 	{#if url}
 		<img
 			src={url}
@@ -41,7 +47,7 @@ const url = $derived(thumbnailUrl(doc));
 				viewBox="0 0 24 24"
 				stroke-width="1.5"
 				stroke="currentColor"
-				class="h-8 w-8"
+				class={iconClass}
 			>
 				<path
 					stroke-linecap="round"