sticky sidebar fix

Author: 4lb

src/components/server/ServerSidebar.astro

@@ -88,44 +88,49 @@ const { sections, title = "Main Features" } = Astro.props;
 </style>
 
 <script>
-  // Intersection Observer to highlight active section
-  const observerOptions = {
-    root: null,
-    rootMargin: "-20px",
-    threshold: 1,
-  };
+  // Only run this script if the server sidebar exists on the page
+  const serverSidebar = document.querySelector('.server-sidebar');
+  if (serverSidebar) {
+    // Intersection Observer to highlight active section
+    const observerOptions = {
+      root: null,
+      rootMargin: "-20px",
+      threshold: 1,
+    };
 
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      const id = entry.target.getAttribute("id");
-      const link = document.querySelector(`[data-section="${id}"]`);
-      
-      if (entry.isIntersecting) {
-        link?.classList.add("active");
-      } else {
-        link?.classList.remove("active");
-      }
-    });
-  }, observerOptions);
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const id = entry.target.getAttribute("id");
+        const link = document.querySelector(`[data-section="${id}"]`);
+        
+        if (entry.isIntersecting) {
+          link?.classList.add("active");
+        } else {
+          link?.classList.remove("active");
+        }
+      });
+    }, observerOptions);
 
-  // Observe all sections
-  document.querySelectorAll("section[id]").forEach((section) => {
-    observer.observe(section);
-  });
+    // Only observe sections on the server page (those with specific IDs)
+    const serverSections = document.querySelectorAll("#server-page section[id]");
+    serverSections.forEach((section) => {
+      observer.observe(section);
+    });
 
-  // Smooth scroll for navigation
-  document.querySelectorAll(".server-sidebar a").forEach((link) => {
-    link.addEventListener("click", (e) => {
-      e.preventDefault();
-      const targetId = link.getAttribute("href")?.substring(1);
-      const targetElement = document.getElementById(targetId!);
-      
-      if (targetElement) {
-        targetElement.scrollIntoView({
-          behavior: "smooth",
-          block: "start",
-        });
-      }
+    // Smooth scroll for navigation
+    document.querySelectorAll(".server-sidebar a").forEach((link) => {
+      link.addEventListener("click", (e) => {
+        e.preventDefault();
+        const targetId = link.getAttribute("href")?.substring(1);
+        const targetElement = document.getElementById(targetId!);
+        
+        if (targetElement) {
+          targetElement.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+          });
+        }
+      });
     });
-  });
-</script> 
+  }
+</script>

src/pages/blog/[slug].astro

@@ -147,12 +147,7 @@ const hasCaseStudy =
 </ProductLayout>
 
 <style lang="scss">
-  // Global overrides for proper scroll behavior
-  :global(html),
-  :global(body) {
-    overflow-x: visible !important;
-    overflow-y: visible !important;
-  }
+  // Removed global overflow overrides that were interfering with sticky positioning
 
   .label {
     margin: unset !important;

src/pages/server.astro

@@ -422,13 +422,13 @@ const sections = [
       position: relative;
 
       @include break-up(lg) {
-        display: grid;
-        grid-template-columns: 250px 1fr;
+        display: flex;
+        flex-direction: row;
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
-        align-items: start;
+        align-items: flex-start;
       }
     }
 
@@ -443,10 +443,16 @@ const sections = [
         z-index: 10;
         max-height: calc(100vh - var(--nav-height, 75px) - 4rem);
         overflow-y: auto;
+        align-self: start;
+        /* Remove any inherited transform or will-change */
+        transform: none;
+        will-change: auto;
       }
     }
 
     .main-content {
+      flex: 1;
+      
       .flexible-section{
         scroll-margin-top: 75px;
         padding: 1.5rem 0;

src/styles/global.scss

@@ -4,7 +4,7 @@
 .page-container {
   width: 100%;
   max-width: 100vw;
-  overflow-x: hidden;
+  /* Removed overflow-x: hidden to fix sticky positioning */
   box-sizing: border-box;
 
   @include break-down(lg) {