From db6a3225dbf0ed5542312494b056394965786fcb Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 24 Apr 2026 19:32:23 +0200
Subject: [PATCH] fix(bulk-upload): no layout shift, no autofocus on date field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace JS navHeight measurement with CSS var(--header-height) so the fixed
panel renders in its final position on first paint — no onMount shift.

Add autofocus prop to WhoWhenSection (default true, preserves document-edit
behaviour) and pass autofocus={false} from BulkDocumentEditLayout so the date
field does not steal focus before the user has even dropped any files.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/document/BulkDocumentEditLayout.svelte | 11 +++--------
 .../src/lib/components/document/WhoWhenSection.svelte |  8 +++++---
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte b/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
index 1dfba569..0cf98694 100644
--- a/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
+++ b/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { SvelteMap } from 'svelte/reactivity';
 import { goto } from '$app/navigation';
-import { onMount, onDestroy, untrack } from 'svelte';
+import { onDestroy, untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import BulkDropZone from './BulkDropZone.svelte';
 import FileSwitcherStrip from './FileSwitcherStrip.svelte';
@@ -27,12 +27,6 @@ let {
 	initialReceivers?: Person[];
 } = $props();
 
-// --- Layout ---
-let navHeight = $state(0);
-onMount(() => {
-	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
-});
-
 // --- File state ---
 let files = new SvelteMap<string, FileEntry>();
 let activeId = $state<string | null>(null);
@@ -124,7 +118,7 @@ async function save() {
 }
 </script>
 
-<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
+<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: var(--header-height)">
 	<!-- Topbar -->
 	<div class="flex shrink-0 items-center gap-3 border-b border-line bg-surface px-6 py-3">
 		<a
@@ -226,6 +220,7 @@ async function save() {
 							bind:selectedReceivers={selectedReceivers}
 							bind:dateIso={dateIso}
 							initialSenderName={initialSenderName}
+							autofocus={false}
 						/>
 						<DescriptionSection bind:tags={tags} hideTitle />
 					</ScopeCard>
diff --git a/frontend/src/lib/components/document/WhoWhenSection.svelte b/frontend/src/lib/components/document/WhoWhenSection.svelte
index b5d85a56..ff8a044b 100644
--- a/frontend/src/lib/components/document/WhoWhenSection.svelte
+++ b/frontend/src/lib/components/document/WhoWhenSection.svelte
@@ -16,7 +16,8 @@ let {
 	initialLocation = '',
 	initialSenderName = '',
 	suggestedDateIso = '',
-	suggestedSenderName = ''
+	suggestedSenderName = '',
+	autofocus = true
 }: {
 	senderId?: string;
 	selectedReceivers?: Person[];
@@ -26,6 +27,7 @@ let {
 	initialSenderName?: string;
 	suggestedDateIso?: string;
 	suggestedSenderName?: string;
+	autofocus?: boolean;
 } = $props();
 
 let dateDisplay = $state(untrack(() => isoToGerman(initialDateIso)));
@@ -69,7 +71,7 @@ $effect(() => {
 				oninput={handleDateInput}
 				placeholder={m.form_placeholder_date()}
 				maxlength="10"
-				autofocus={!initialDateIso}
+				autofocus={autofocus && !initialDateIso}
 				class="block w-full rounded border border-line p-2 text-sm shadow-sm
                        {dateInvalid ? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
 				aria-describedby={dateInvalid ? 'date-error' : undefined}
@@ -89,7 +91,7 @@ $effect(() => {
 				bind:value={senderId}
 				initialName={initialSenderName}
 				suggestedName={suggestedSenderName}
-				autofocus={!!initialDateIso}
+				autofocus={autofocus && !!initialDateIso}
 			/>
 		</div>