Remove sidebar pill styling from shell-docs

Author: tylerslaton

showcase/shell-docs/src/app/globals.css

@@ -362,24 +362,12 @@ figure.shiki > div:first-child[class*="border-b"] {
   }
 }
 
-/* Sidebar — float as a card panel inset from all four viewport edges,
- * matching the canonical "DocsLayout sidebar in a card" treatment. The
- * fumadocs aside is `fixed; left: 0; top: var(--fd-sidebar-top);
- * bottom: var(--fd-sidebar-margin)` by default — we override `left` and
- * tighten top/bottom so the panel floats with even breathing room. */
+/* Sidebar — keep the navigation unframed at every viewport width. */
 .shell-docs-sidebar {
-  /* In v16 the aside sits inside a sticky grid-area wrapper whose
-   * horizontal position is already driven by `<main className="mx-3">`
-   * — matching BrandNav's `px-3` (12px) so the sidebar pill's left
-   * edge lines up with BrandNav's left card. The previous
-   * `left: 0.75rem !important` was a v15-era leftover that added an
-   * extra 12px inset on top of main's margin, breaking that column
-   * alignment. */
-  /* Tailwind's `border-[var(--border)]` arbitrary-value class loses to
-   * the bare `border` utility's `currentColor` default in v4's cascade
-   * order — leading to a near-black outline against the white panel.
-   * Force the token explicitly. */
-  border-color: var(--border) !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
 }
 
 /* Sidebar scroll viewport — 1rem padding on all sides matches the
@@ -389,36 +377,6 @@ figure.shiki > div:first-child[class*="border-b"] {
   padding: 1rem !important;
 }
 
-/* Banner width: in fumadocs v16 the aside applies
- * `*:w-(--fd-sidebar-width)` to every direct child, so the banner
- * already matches the nav links underneath (268px). The previous
- * `width: 100%` override forced it to fill the aside, which at wide
- * viewports made the framework-picker stretch beyond the rest of the
- * sidebar. Removing that override is intentional.
- *
- * Pill chrome (the rounded card around the sidebar):
- *   • Below 2xl (≤1535px): keep the rounded card. Fumadocs's aside
- *     fills the sticky grid-area wrapper (`inset-y-0`) which is
- *     `100dvh - --fd-docs-row-1` tall. We leave this alone so the
- *     internal scroll viewport stays bounded and the footer
- *     (GitHub + Discord + theme toggle) pins to the bottom of the
- *     visible pill instead of being pushed below the viewport.
- *   • 2xl+ (≥1536px): drop the rounded/border/bg/shadow. At this
- *     point the sidebar grid-area widens past `--fd-sidebar-width`
- *     because the grid's outer 1fr columns gain horizontal space, so
- *     the pill would frame empty whitespace. The nav items
- *     (right-aligned via `items-end`) read better unframed. The
- *     `2xl` Tailwind breakpoint (1536px) lines up with fumadocs's
- *     `--fd-layout-width: 97rem` (1552px). */
-@media (min-width: 1536px) {
-  .shell-docs-sidebar {
-    background-color: transparent !important;
-    border: 0 !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-  }
-}
-
 /* Bridge shell-docs's hand-rolled token names (--bg, --text, --accent, …)
  * to the names Fumadocs's shadcn preset expects (--background, --foreground,
  * --primary, …). Done in @theme inline so Tailwind's color utilities

showcase/shell-docs/src/components/brand-nav.tsx

@@ -81,7 +81,7 @@ export function BrandNav(_props: BrandNavProps = {}) {
       {/* Cap the BrandNav's visible chrome at the same `--fd-layout-width`
        * (97rem) that the fumadocs docs grid uses, and center it. At
        * wide viewports this keeps the BrandNav's left/right edges
-       * aligned with the sidebar pill on the left and the docs content
+       * aligned with the sidebar column on the left and the docs content
        * column on the right; at narrower viewports it's a no-op
        * because the inner width never reaches the cap. */}
       <div className="flex justify-between items-center w-full h-full max-w-[97rem] mx-auto">

showcase/shell-docs/src/components/shell-docs-layout.tsx

@@ -11,8 +11,8 @@ import DiscordIcon from "./icons/discord";
 // Shared Fumadocs `DocsLayout` chrome used by every shell-docs route.
 // All five callers (home overview, framework root, framework-scoped MDX
 // via DocsPageView, /reference, /ag-ui) pass the same nav/search/sidebar
-// config — only `tree` and `sidebar.banner` vary. Centralizing keeps the
-// sidebar surface, mobile nav slot, and container className from drifting
+// config — only `tree` and `sidebar.banner` vary. Centralizing keeps
+// sidebar behavior, mobile nav slot, and container className from drifting
 // across routes when one is tweaked.
 export function ShellDocsLayout({
   tree,
@@ -46,8 +46,7 @@ export function ShellDocsLayout({
         banner,
         // Hide Fumadocs's collapse toggle — shell-docs has its own chrome.
         collapsible: false,
-        className:
-          "rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm shell-docs-sidebar",
+        className: "shell-docs-sidebar",
         // Note: `key` is required here because fumadocs's Sidebar
         // passes the `footer` ReactNode into a `jsxs(children: [a, b,
         // footer])` array, and React's dev-mode warning insists every

showcase/shell-docs/src/components/sidebar-framework-selector.tsx

@@ -47,8 +47,8 @@ export function SidebarFrameworkSelector() {
 
   return (
     // Sticky so the selector stays visible as the user scrolls long
-    // sidebars. The wrapper bg matches the sidebar surface so the area
-    // surrounding the pill reads as one continuous panel.
+    // sidebars. The wrapper bg keeps nav text from showing through the
+    // sticky header while the sidebar remains visually unframed.
     <div className="sticky top-0 z-10 bg-[var(--bg-surface)] backdrop-blur-lg">
       <FrameworkSelector
         options={options}