From f18649fb79a2b7767da69cf16f4ed8621e210039 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 24 Mar 2026 23:06:42 +0100
Subject: [PATCH] feat(frontend): open bottom panel at full height (80vh) by
 default

Panel now opens to 80 % of the viewport height so the user can immediately
read comments and metadata without having to drag it up first.
The user can drag the top handle down to make it smaller; that size is
persisted to localStorage and restored on the next visit.

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

diff --git a/frontend/src/lib/components/DocumentBottomPanel.svelte b/frontend/src/lib/components/DocumentBottomPanel.svelte
index 514f808f..f2bdfd3c 100644
--- a/frontend/src/lib/components/DocumentBottomPanel.svelte
+++ b/frontend/src/lib/components/DocumentBottomPanel.svelte
@@ -68,7 +68,6 @@ let {
 }: Props = $props();
 
 const MIN_HEIGHT = 52; // drag handle (8px) + tab bar (~44px)
-const DEFAULT_HEIGHT = 320;
 
 let isDragging = $state(false);
 let dragStartY = 0;
@@ -78,7 +77,7 @@ function openTab(tab: Tab) {
 	activeTab = tab;
 	if (!open) {
 		open = true;
-		if (height <= MIN_HEIGHT) height = DEFAULT_HEIGHT;
+		if (height <= MIN_HEIGHT) height = Math.floor(window.innerHeight * 0.8);
 	}
 }
 
@@ -104,7 +103,7 @@ function onDragMove(e: PointerEvent) {
 		open = false;
 	} else {
 		open = true;
-		height = Math.max(DEFAULT_HEIGHT / 4, Math.min(newHeight, maxHeight));
+		height = Math.max(80, Math.min(newHeight, maxHeight));
 	}
 }
 
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index b866dc0f..5e26f946 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -73,7 +73,7 @@ const LS_KEY_HEIGHT = 'doc-panel-height';
 const LS_KEY_TAB = 'doc-panel-tab';
 
 let panelOpen = $state(false);
-let panelHeight = $state(320);
+let panelHeight = $state(0); // set to 80vh on mount
 let activeTab = $state<Tab>('metadata');
 let localStorageRestored = $state(false);
 
@@ -85,6 +85,7 @@ onMount(() => {
 	if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
 		activeTab = savedTab as Tab;
 	}
+	panelHeight = Math.floor(window.innerHeight * 0.8);
 	if (savedHeight) {
 		const h = parseInt(savedHeight, 10);
 		if (!isNaN(h) && h >= 80) panelHeight = h;