From 1eb2659ba0d8a99b7802ff3278076b527d5e4e46 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 24 Mar 2026 23:10:26 +0100
Subject: [PATCH] fix(frontend): open bottom panel to full height below the
 document header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of an arbitrary 80 % cap, the panel now measures the actual
DocumentTopBar height at open time and fills the remaining viewport
exactly — so the PDF is fully covered and the drawer reaches right up
to the header. Drag-to-shrink still works as before.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/DocumentBottomPanel.svelte | 9 +++++++--
 frontend/src/lib/components/DocumentTopBar.svelte      | 1 +
 frontend/src/routes/documents/[id]/+page.svelte        | 3 ++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/DocumentBottomPanel.svelte b/frontend/src/lib/components/DocumentBottomPanel.svelte
index f2bdfd3c..c3e509ca 100644
--- a/frontend/src/lib/components/DocumentBottomPanel.svelte
+++ b/frontend/src/lib/components/DocumentBottomPanel.svelte
@@ -73,11 +73,16 @@ let isDragging = $state(false);
 let dragStartY = 0;
 let dragStartHeight = 0;
 
+function fullHeight() {
+	const topbar = document.querySelector('[data-topbar]');
+	return window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0);
+}
+
 function openTab(tab: Tab) {
 	activeTab = tab;
 	if (!open) {
 		open = true;
-		if (height <= MIN_HEIGHT) height = Math.floor(window.innerHeight * 0.8);
+		if (height <= MIN_HEIGHT) height = fullHeight();
 	}
 }
 
@@ -96,7 +101,7 @@ function onDragMove(e: PointerEvent) {
 	if (!isDragging) return;
 	const delta = dragStartY - e.clientY; // positive = dragging up = bigger panel
 	const newHeight = dragStartHeight + delta;
-	const maxHeight = Math.floor(window.innerHeight * 0.8);
+	const maxHeight = fullHeight();
 
 	if (newHeight <= MIN_HEIGHT + 20) {
 		// collapsed past threshold → close
diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index fdca043d..16325051 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -59,6 +59,7 @@ const compactMeta = $derived.by(() => {
 
 <div
 	class="z-20 flex shrink-0 items-center justify-between border-b border-brand-sand bg-white px-6 py-3 shadow-sm"
+	data-topbar
 >
 	<!-- Left: back + title -->
 	<div class="flex min-w-0 items-center gap-4 overflow-hidden">
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 5e26f946..91bb46f3 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -85,7 +85,8 @@ onMount(() => {
 	if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
 		activeTab = savedTab as Tab;
 	}
-	panelHeight = Math.floor(window.innerHeight * 0.8);
+	const topbar = document.querySelector('[data-topbar]');
+	panelHeight = window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0);
 	if (savedHeight) {
 		const h = parseInt(savedHeight, 10);
 		if (!isNaN(h) && h >= 80) panelHeight = h;