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

@@ -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 */