marcel/familienarchiv
1
0
Fork 0
Code Issues 103 Pull Requests 1 Actions 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() { function fullHeight() {
const topbar = document.querySelector('[data-topbar]'); const topbar = document.querySelector('[data-topbar]');
return window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0); return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
} }
function openTab(tab: Tab) { 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'; const LS_KEY_TAB = 'doc-panel-tab';
let panelOpen = $state(false); 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 activeTab = $state<Tab>('metadata');
let localStorageRestored = $state(false); let localStorageRestored = $state(false);
onMount(() => { onMount(() => {
navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
const savedOpen = localStorage.getItem(LS_KEY_OPEN); const savedOpen = localStorage.getItem(LS_KEY_OPEN);
const savedHeight = localStorage.getItem(LS_KEY_HEIGHT); const savedHeight = localStorage.getItem(LS_KEY_HEIGHT);
const savedTab = localStorage.getItem(LS_KEY_TAB); const savedTab = localStorage.getItem(LS_KEY_TAB);
@@ -91,7 +94,7 @@ onMount(() => {
activeTab = savedTab as Tab; activeTab = savedTab as Tab;
} }
const topbar = document.querySelector('[data-topbar]'); const topbar = document.querySelector('[data-topbar]');
panelHeight = window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0); panelHeight = window.innerHeight - navHeight - (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;
@@ -133,7 +136,11 @@ $effect(() => {
<title>{doc.title || doc.originalFilename || 'Dokument'}</title> <title>{doc.title || doc.originalFilename || 'Dokument'}</title>
</svelte:head> </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 <DocumentTopBar
doc={doc} doc={doc}
canWrite={data.canWrite ?? false} canWrite={data.canWrite ?? false}