fix(docs): stop the sidebar drifting when page content resizes

The sidebar used fumadocs' `sticky` positioning, and a sticky box is
bottom-limited by its containing block. #nd-docs-layout ends ~660px above the
document bottom because the site footer is a sibling of the layout rather than
a grid child, so across the whole footer the sidebar was pushed progressively
upward. Any content-height change while the reader sat in that zone then moved
it: expanding one FAQ row shifted the sidebar 16.8px at a fixed scroll offset,
and collapsing it shifted it back.

Pin the sidebar and its divider to the viewport instead. A fixed box ignores
both the container's end and the document height, so neither the drift nor the
jump can happen. The grid columns are explicit (`0px 300px 1fr 268px 0px`), so
taking the placeholder out of flow leaves its track intact and the content
column does not move. The footer is already opaque and now out-stacks both, so
it slides over them at the end of the page.

Measured with Playwright before and after: sidebar delta on expand/collapse
16.8px/-16.8px -> 0px/0px, content column left and width unchanged, and the
sidebar holds top:92px at the page bottom on the docs, API-reference, academy
and integrations layouts. Mobile is untouched (the rule is desktop-only).

Author: waleedlatif1

apps/docs/app/global.css

@@ -362,16 +362,33 @@ 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 to stay glued to the
+     sidebar's right edge. #nd-docs-layout is a CSS grid (see fumadocs' Container
+     slot); the pseudo-element spans the full grid so it reads as decorative
+     overlay rather than being auto-placed into a real content cell and skewing
+     that cell's sizing. */
   #nd-docs-layout::before {
     content: "";
     display: block;
-    position: sticky;
+    position: fixed;
     grid-row: 1 / -1;
     grid-column: 1 / -1;
     top: 92px; /* below navbar */
@@ -383,6 +400,14 @@ aside#nd-sidebar [data-radix-scroll-area-viewport] {
     z-index: 21;
   }
 
+  /* The footer is opaque and now has to out-stack the pinned sidebar and its
+     divider (z-index 20 and 21), so it slides over them at the end of the page
+     rather than being drawn through. */
+  footer {
+    position: relative;
+    z-index: 22;
+  }
+
   /* Hide fumadocs nav on desktop - we use custom navbar there */
   #nd-docs-layout > header {
     display: none !important;