marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(frontend): open bottom panel to full height below the document header

Browse Source 
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>
This commit is contained in:
Marcel
2026-03-24 23:10:26 +01:00
parent f18649fb79
commit 1eb2659ba0
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/lib/components/DocumentBottomPanel.svelte
View File

@@ -73,11 +73,16 @@ let isDragging = $state(false);
let dragStartY = 0; let dragStartY = 0;
let dragStartHeight = 0; let dragStartHeight = 0;
function fullHeight() {
const topbar = document.querySelector('[data-topbar]');
return window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0);
}
function openTab(tab: Tab) { function openTab(tab: Tab) {
activeTab = tab; activeTab = tab;
if (!open) { if (!open) {
open = true; 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; if (!isDragging) return;
const delta = dragStartY - e.clientY; // positive = dragging up = bigger panel const delta = dragStartY - e.clientY; // positive = dragging up = bigger panel
const newHeight = dragStartHeight + delta; const newHeight = dragStartHeight + delta;
const maxHeight = Math.floor(window.innerHeight * 0.8); const maxHeight = fullHeight();
if (newHeight <= MIN_HEIGHT + 20) { if (newHeight <= MIN_HEIGHT + 20) {
// collapsed past threshold → close // collapsed past threshold → close

1
frontend/src/lib/components/DocumentTopBar.svelte
View File

@@ -59,6 +59,7 @@ const compactMeta = $derived.by(() => {
<div <div
class="z-20 flex shrink-0 items-center justify-between border-b border-brand-sand bg-white px-6 py-3 shadow-sm" 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 --> <!-- Left: back + title -->
<div class="flex min-w-0 items-center gap-4 overflow-hidden"> <div class="flex min-w-0 items-center gap-4 overflow-hidden">

3
frontend/src/routes/documents/[id]/+page.svelte
View File

@@ -85,7 +85,8 @@ onMount(() => {
if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) { if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
activeTab = savedTab as Tab; 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) { if (savedHeight) {
const h = parseInt(savedHeight, 10); const h = parseInt(savedHeight, 10);
if (!isNaN(h) && h >= 80) panelHeight = h; if (!isNaN(h) && h >= 80) panelHeight = h;