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

fix(frontend): restore global nav bar on document detail page

Browse Source 
The document viewer container was using fixed inset-0 z-50 which
covered the sticky global nav bar. Now measures nav height at mount
and offsets the container top accordingly, dropping z-index to z-40.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-24 23:26:29 +01:00
parent 142f296255
commit 5ea5590c89
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -75,7 +75,7 @@ let dragStartHeight = 0;
function fullHeight() {
const topbar = document.querySelector('[data-topbar]');
return window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0);
return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
}
function openTab(tab: Tab) {

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

@@ -78,11 +78,14 @@ const LS_KEY_HEIGHT = 'doc-panel-height';
const LS_KEY_TAB = 'doc-panel-tab';
let panelOpen = $state(false);
let panelHeight = $state(0); // set to 80vh on mount
let panelHeight = $state(0); // set to full height on mount
let navHeight = $state(0);
let activeTab = $state<Tab>('metadata');
let localStorageRestored = $state(false);
onMount(() => {
navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
const savedOpen = localStorage.getItem(LS_KEY_OPEN);
const savedHeight = localStorage.getItem(LS_KEY_HEIGHT);
const savedTab = localStorage.getItem(LS_KEY_TAB);
@@ -91,7 +94,7 @@ onMount(() => {
activeTab = savedTab as Tab;
}
const topbar = document.querySelector('[data-topbar]');
panelHeight = window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0);
panelHeight = window.innerHeight - navHeight - (topbar?.getBoundingClientRect().height ?? 0);
if (savedHeight) {
const h = parseInt(savedHeight, 10);
if (!isNaN(h) && h >= 80) panelHeight = h;
@@ -133,7 +136,11 @@ $effect(() => {
<title>{doc.title || doc.originalFilename || 'Dokument'}</title>
</svelte:head>
<div class="fixed inset-0 z-50 flex flex-col overflow-hidden bg-white" data-hydrated>
<div
class="fixed right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden bg-white"
style="top: {navHeight}px"
data-hydrated
>
<DocumentTopBar
doc={doc}
canWrite={data.canWrite ?? false}