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;