From 16ccda0c335df377a9cff2d32fdae5330ab89127 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Thu, 18 Dec 2025 09:31:16 +0100
Subject: [PATCH] Update Viewport.vue: adjust independentScroll logic, add
 spacer for header, and refine max-height calculation

- Modified `independentScrollMaxHeight` to include `footerHeight` for accurate layout adjustment.
- Added spacer element to prevent content overlap with the fixed header.
- Updated `.independent-scroll` styles for consistency in max-height calculation.
---
 src/components/viewport/Viewport.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/viewport/Viewport.vue b/src/components/viewport/Viewport.vue
index 7854092e..4dee9854 100644
--- a/src/components/viewport/Viewport.vue
+++ b/src/components/viewport/Viewport.vue
@@ -25,7 +25,7 @@ const updateHeaderHeight = () => {
 };
 
 const independentScrollMaxHeight = computed(() => {
-  return `calc(100vh - ${headerHeight.value}px)`;
+  return `calc(100vh - ${headerHeight.value + footerHeight.value}px)`;
 });
 
 onMounted(() => {
@@ -45,6 +45,8 @@ const showFooterInContent = computed(() => {
     <div ref="headerElement">
       <ViewportHeader />
     </div>
+    <!-- Spacer (To avoid content being hidden behind the fixed header) -->
+    <div :style="{ height: headerHeight + 'px' }"></div>
     <div class="fixed-grid has-12-cols">
     <!-- Navigation and content wrapper -->
       <div class="grid">
@@ -89,7 +91,7 @@ const showFooterInContent = computed(() => {
 }
 .independent-scroll {
   overflow: auto;
-  max-height: calc(100vh - 120px); /* Automatically adjusted by script */
+  max-height: calc(100vh - 60px); /* Automatically adjusted by script */
 }
 .slick-scroll-layout {
   padding-right: 10px; /* Adjust based on scrollbar width */