From aa9c47ecc8a97306e605795bcac4ededd76aab62 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 24 Apr 2026 19:26:22 +0200
Subject: [PATCH] fix(bulk-upload): form layout polish and drop zone sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drop zone box doubled: max-w-xl, larger icon (80px), bigger padding and text
- Title field wrapped in its own card (matches WhoWhenSection/DescriptionSection)
- Removed double-wrapping outer card around WhoWhenSection + DescriptionSection
- Added space-y-4 between form sections for consistent breathing room
- ScopeCard per-file label: text-accent → text-primary for legible contrast in light theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../document/BulkDocumentEditLayout.svelte    | 26 +++++++++----------
 .../components/document/BulkDropZone.svelte   | 16 ++++++------
 .../lib/components/document/ScopeCard.svelte  |  2 +-
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte b/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
index 2c9b8511..1dfba569 100644
--- a/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
+++ b/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
@@ -197,7 +197,7 @@ async function save() {
 		<div class="flex flex-[45] flex-col overflow-hidden">
 			<!-- Scrollable form area — greyed out and non-interactive when no files selected -->
 			<div
-				class="flex-1 overflow-y-auto p-4 transition-opacity"
+				class="flex-1 space-y-4 overflow-y-auto p-4 transition-opacity"
 				class:opacity-60={files.size === 0}
 				class:pointer-events-none={files.size === 0}
 			>
@@ -231,9 +231,9 @@ async function save() {
 					</ScopeCard>
 				{:else}
 					<!-- N=0 (disabled placeholder) or N=1 (active): title + shared form -->
-					<div class="mb-4">
+					<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
 						<label class="block">
-							<span class="mb-1 block text-xs font-medium tracking-widest text-ink-2 uppercase">
+							<span class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase">
 								{m.form_label_title()} <span class="text-danger">*</span>
 							</span>
 							{#if activeFile}
@@ -242,28 +242,26 @@ async function save() {
 									value={activeFile.title}
 									oninput={(e) =>
 										setTitle(activeId!, (e.currentTarget as HTMLInputElement).value)}
-									class="block w-full rounded-sm border border-line bg-surface p-2 text-sm focus:border-accent focus:outline-none"
+									class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 								/>
 							{:else}
 								<input
 									type="text"
 									disabled
 									placeholder="—"
-									class="block w-full rounded-sm border border-line bg-surface p-2 text-sm text-ink-3"
+									class="block w-full rounded border border-line p-2 text-sm text-ink-3 shadow-sm"
 								/>
 							{/if}
 						</label>
 					</div>
 
-					<div class="rounded-sm border border-line bg-surface p-4 shadow-sm">
-						<WhoWhenSection
-							bind:senderId={senderId}
-							bind:selectedReceivers={selectedReceivers}
-							bind:dateIso={dateIso}
-							initialSenderName={initialSenderName}
-						/>
-						<DescriptionSection bind:tags={tags} hideTitle />
-					</div>
+					<WhoWhenSection
+						bind:senderId={senderId}
+						bind:selectedReceivers={selectedReceivers}
+						bind:dateIso={dateIso}
+						initialSenderName={initialSenderName}
+					/>
+					<DescriptionSection bind:tags={tags} hideTitle />
 				{/if}
 			</div>
 
diff --git a/frontend/src/lib/components/document/BulkDropZone.svelte b/frontend/src/lib/components/document/BulkDropZone.svelte
index a279ffc5..b763370e 100644
--- a/frontend/src/lib/components/document/BulkDropZone.svelte
+++ b/frontend/src/lib/components/document/BulkDropZone.svelte
@@ -30,15 +30,15 @@ let isDragging = $state(false);
 >
 	<div
 		class={[
-			'flex w-full max-w-sm flex-col items-center gap-3 rounded-md border-2 border-dashed px-6 py-9 text-center transition-colors',
+			'flex w-full max-w-xl flex-col items-center gap-5 rounded-md border-2 border-dashed px-12 py-16 text-center transition-colors',
 			isDragging ? 'border-accent bg-accent/10' : 'border-accent/50 bg-white/[0.04]'
 		].join(' ')}
 	>
 		<!-- Circular mint icon -->
-		<div class="flex h-14 w-14 items-center justify-center rounded-full bg-accent text-primary">
+		<div class="flex h-20 w-20 items-center justify-center rounded-full bg-accent text-primary">
 			<svg
-				width="22"
-				height="22"
+				width="32"
+				height="32"
 				viewBox="0 0 32 32"
 				xmlns="http://www.w3.org/2000/svg"
 				aria-hidden="true"
@@ -51,10 +51,10 @@ let isDragging = $state(false);
 		</div>
 
 		<!-- Serif title -->
-		<p class="font-serif text-sm font-bold text-ink">{m.bulk_drop_hint()}</p>
+		<p class="font-serif text-base font-bold text-ink">{m.bulk_drop_hint()}</p>
 
 		<!-- Sub description -->
-		<p class="text-xs leading-relaxed text-ink-2">
+		<p class="text-sm leading-relaxed text-ink-2">
 			Für jede Datei wird ein eigenes Dokument erstellt.<br />
 			<strong class="text-ink">Der Titel</strong> wird aus dem Dateinamen vorausgefüllt —
 			<strong class="text-ink">alle anderen Felder</strong> gelten für alle gemeinsam.
@@ -62,7 +62,7 @@ let isDragging = $state(false);
 
 		<!-- CTA button -->
 		<label
-			class="flex min-h-[44px] cursor-pointer items-center rounded-sm bg-primary px-4 py-2 text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90"
+			class="flex min-h-[44px] cursor-pointer items-center rounded-sm bg-primary px-6 py-2 text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90"
 		>
 			Dateien auswählen
 			<input
@@ -78,6 +78,6 @@ let isDragging = $state(false);
 		</label>
 
 		<!-- Format hint -->
-		<p class="text-[11px] text-ink-3">{m.bulk_drop_sub()}</p>
+		<p class="text-xs text-ink-3">{m.bulk_drop_sub()}</p>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/document/ScopeCard.svelte b/frontend/src/lib/components/document/ScopeCard.svelte
index 7eb6002d..6fb79f96 100644
--- a/frontend/src/lib/components/document/ScopeCard.svelte
+++ b/frontend/src/lib/components/document/ScopeCard.svelte
@@ -32,7 +32,7 @@ let {
 			</span>
 		</div>
 	{:else}
-		<p class="mb-3 text-xs font-bold tracking-widest text-accent uppercase">
+		<p class="mb-3 text-xs font-bold tracking-widest text-primary uppercase">
 			{m.bulk_scope_per_file_label()}
 		</p>
 	{/if}