fix(shell-docs): stack sidebar under banner instead of overlapping BrandNav

tylerslaton · claude · tylerslaton · commit 2b08523e9ef3 · 2026-05-18T20:03:52.000-07:00
The DocsLayout sidebar uses `position: fixed` with hardcoded `top: 76px / 96px`
overrides at md/xl. When the rotating banner is visible, body-flow `Banners` +
`BrandNav` shift down (banner ~54px + BrandNav 68/88px), but the fixed sidebar
stays pinned — so the "LangGraph (Python)" framework picker overlaps the
BrandNav row.

Wrap both top overrides in `calc(... + var(--fd-banner-height, 0px))` so the
sidebar slides down by the banner's height when shown and snaps back when
dismissed. `Banners` already writes that variable on `&lt;html&gt;` (54px / 0px),
and `MobileTopNav` uses the same pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/showcase/shell-docs/src/app/globals.css b/showcase/shell-docs/src/app/globals.css
@@ -292,15 +292,20 @@ figure.shiki > div:first-child[class*="border-b"] {
   width: 100% !important;
 }
 
+/* Top offset stacks BrandNav (68px md / 88px xl) under the banner (54px
+ * when shown, 0px when dismissed — Banners writes the variable on <html>).
+ * Without `--fd-banner-height` in the calc, the fixed sidebar pins to
+ * 76/96px while body-flow chrome (Banner + BrandNav) shifts down past it,
+ * overlapping the nav row. */
 @media (min-width: 768px) {
   .shell-docs-sidebar {
-    top: 76px !important;
+    top: calc(76px + var(--fd-banner-height, 0px)) !important;
   }
 }
 
 @media (min-width: 1280px) {
   .shell-docs-sidebar {
-    top: 96px !important;
+    top: calc(96px + var(--fd-banner-height, 0px)) !important;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -292,15 +292,20 @@ figure.shiki > div:first-child[class*="border-b"] {`
`292`	`292`	`width: 100% !important;`
`293`	`293`	`}`
`294`	`294`
	`295`	`+/* Top offset stacks BrandNav (68px md / 88px xl) under the banner (54px`
	`296`	`+ * when shown, 0px when dismissed — Banners writes the variable on <html>).`
	`297`	+ * Without `--fd-banner-height` in the calc, the fixed sidebar pins to
	`298`	`+ * 76/96px while body-flow chrome (Banner + BrandNav) shifts down past it,`
	`299`	`+ * overlapping the nav row. */`
`295`	`300`	`@media (min-width: 768px) {`
`296`	`301`	`.shell-docs-sidebar {`
`297`		`- top: 76px !important;`
	`302`	`+ top: calc(76px + var(--fd-banner-height, 0px)) !important;`
`298`	`303`	`}`
`299`	`304`	`}`
`300`	`305`
`301`	`306`	`@media (min-width: 1280px) {`
`302`	`307`	`.shell-docs-sidebar {`
`303`		`- top: 96px !important;`
	`308`	`+ top: calc(96px + var(--fd-banner-height, 0px)) !important;`
`304`	`309`	`}`
`305`	`310`	`}`
`306`	`311`