diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index 39f705b6510..5f6ea80f42d 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -362,18 +362,32 @@ aside#nd-sidebar [data-radix-scroll-area-viewport] {
     min-height: var(--fd-docs-height) !important;
   }
 
-  /* Sidebar divider line — sticky within the docs layout box, so it ends where
-     the layout does instead of bleeding into (or past) the footer below it.
-     #nd-docs-layout is a CSS grid (see fumadocs' Container slot); a sticky
-     pseudo-element stays in normal flow, so without an explicit grid-area it
-     gets auto-placed into a real content cell and skews that cell's sizing.
-     Spanning the full grid keeps it purely decorative/overlaid instead. */
+  /* Pin the sidebar to the viewport instead of letting fumadocs' `sticky` do it.
+     A sticky box is bottom-limited by its containing block, and #nd-docs-layout
+     ends ~660px above the document bottom because the site footer is a sibling
+     of the layout, not a grid child. So across the whole footer the sidebar gets
+     pushed upward — and any content-height change while the reader is in that
+     zone (expanding an FAQ row, say) makes it visibly jump. A fixed box ignores
+     both the container's end and the document's height, so neither happens.
+
+     Safe because the grid columns are explicit (`0px 300px 1fr 268px 0px`), so
+     removing the placeholder from flow leaves its track intact. `left`/`width`
+     are restated because a fixed box no longer derives them from its grid cell,
+     and `top`/`height` already come from fumadocs' own utility classes. */
+  [data-sidebar-placeholder] {
+    position: fixed !important;
+    left: var(--sidebar-offset);
+    width: var(--fd-sidebar-width);
+  }
+
+  /* Sidebar divider line — pinned for the same reason, and so it stays glued to
+     the sidebar's right edge. Being fixed takes it out of #nd-docs-layout's grid
+     entirely, so it needs no grid placement and cannot skew a content cell; its
+     position comes from `left`/`top` alone. */
   #nd-docs-layout::before {
     content: "";
     display: block;
-    position: sticky;
-    grid-row: 1 / -1;
-    grid-column: 1 / -1;
+    position: fixed;
     top: 92px; /* below navbar */
     height: calc(100dvh - 92px);
     left: calc(var(--sidebar-offset) + var(--fd-sidebar-width));
diff --git a/apps/docs/components/footer/footer.tsx b/apps/docs/components/footer/footer.tsx
index 698aa012475..75896de0aed 100644
--- a/apps/docs/components/footer/footer.tsx
+++ b/apps/docs/components/footer/footer.tsx
@@ -130,9 +130,16 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
   )
 }
 
+/**
+ * Site footer.
+ *
+ * `relative z-[22]` stacks it above the docs sidebar (z-20) and that sidebar's
+ * divider (z-21), both of which are pinned to the viewport, so the footer slides
+ * over them at the end of the page instead of being drawn through.
+ */
 export function Footer() {
   return (
-    <footer className='mt-[120px] w-full border-[var(--border)] border-t bg-[var(--bg)] max-sm:mt-16 max-lg:mt-[88px]'>
+    <footer className='relative z-[22] mt-[120px] w-full border-[var(--border)] border-t bg-[var(--bg)] max-sm:mt-16 max-lg:mt-[88px]'>
       <div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
         <nav
           aria-label='Footer navigation'