fixed footer & sidebar

Author: DavertMik

src/components/PageFrame.astro

@@ -57,7 +57,7 @@ const shouldRenderSidebar = hasSidebar && !is404Page;
             visibility: var(--sl-sidebar-visibility, hidden);
             position: fixed;
             z-index: var(--sl-z-index-menu);
-            inset-block: var(--sl-nav-height) 0;
+            inset-block: var(--sl-nav-height) var(--cc-footer-overlap, 0px);
             inset-inline-start: 0;
             width: 100%;
             background-color: var(--sl-color-black);
@@ -195,11 +195,33 @@ const shouldRenderSidebar = hasSidebar && !is404Page;
         });
     }
 
+    let footerOverlapRaf = 0;
+    function updateFooterOverlap() {
+        footerOverlapRaf = 0;
+        const footer = document.querySelector('.cc-footer');
+        if (!footer) {
+            document.documentElement.style.setProperty('--cc-footer-overlap', '0px');
+            return;
+        }
+        const rect = footer.getBoundingClientRect();
+        const overlap = Math.max(0, window.innerHeight - rect.top);
+        document.documentElement.style.setProperty('--cc-footer-overlap', overlap + 'px');
+    }
+    function scheduleFooterOverlap() {
+        if (footerOverlapRaf) return;
+        footerOverlapRaf = requestAnimationFrame(updateFooterOverlap);
+    }
+
     function setup() {
         header = document.querySelector('#site-header');
 
         wrapTablesForScroll();
         tagHeaderlessTables();
+        updateFooterOverlap();
+        window.removeEventListener('scroll', scheduleFooterOverlap);
+        window.removeEventListener('resize', scheduleFooterOverlap);
+        window.addEventListener('scroll', scheduleFooterOverlap, { passive: true });
+        window.addEventListener('resize', scheduleFooterOverlap);
 
         if (!header) return;
 

src/components/SiteFooter.astro

@@ -116,13 +116,7 @@ const currentYear = new Date().getFullYear();
         background: var(--codecept-page-bg-dark, #0a0b14);
         color: rgba(255, 255, 255, 0.72);
         border-top: 1px solid rgba(255, 255, 255, 0.06);
-    }
-    /* On desktop the docs sidebar is a fixed panel; lift the footer above it so
-       it spans edge to edge instead of being tucked beside the sidebar. */
-    @media (min-width: 50rem) {
-        .cc-footer {
-            z-index: calc(var(--sl-z-index-menu, 5) + 1);
-        }
+        position: relative;
     }
     .cc-footer-grain {
         position: absolute;