From 7b74f3475d3f5daf1d346279a48f97e961aebeba Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 3 Nov 2025 12:40:07 -0600
Subject: [PATCH] fix(site): stretch docs sidebar on desktop to prevent safari
 visual bug

where, behind the sidebar, the docs sidebar's texture interfered with the sitewide texture
---
 site/src/components/docs/DocsSidebar.astro | 6 ++++--
 site/src/layouts/Docs.astro                | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/site/src/components/docs/DocsSidebar.astro b/site/src/components/docs/DocsSidebar.astro
index f1f293ae..c98cfd2c 100644
--- a/site/src/components/docs/DocsSidebar.astro
+++ b/site/src/components/docs/DocsSidebar.astro
@@ -5,18 +5,20 @@ import { PreferenceUpdater } from '@/components/docs/PreferenceUpdater';
 import SidebarItem from '@/components/docs/SidebarItem.astro';
 import { filterSidebar } from '@/utils/docs/sidebar';
 import FilmGrain from '../FilmGrain';
+import clsx from 'clsx';
 
 type Props<F extends SupportedFramework = SupportedFramework> = {
   framework: F;
   style: SupportedStyle<F>;
   docTitles: Map<string, string>;
+  class?: string;
 };
 
-const { framework, style, docTitles } = Astro.props;
+const { framework, style, docTitles, class: className } = Astro.props;
 const filteredSidebar = filterSidebar(framework, style);
 ---
 
-<div class="bg-light-80 dark:bg-dark-100">
+<div class={clsx('bg-light-80 dark:bg-dark-100', className)}>
   <slot />
   <PreferenceUpdater client:idle currentFramework={framework} currentStyle={style} />
   <nav class="p-6">
diff --git a/site/src/layouts/Docs.astro b/site/src/layouts/Docs.astro
index e0014fea..effba483 100644
--- a/site/src/layouts/Docs.astro
+++ b/site/src/layouts/Docs.astro
@@ -37,11 +37,11 @@ const docTitles = new Map(allDocs.map((d) => [d.id, getDocTitle(d, framework)]))
       <DocsSidebar slot="mobile-nav" framework={framework} style={style} docTitles={docTitles} />
     </NavBar>
     <aside
-      class="hidden lg:block lg:border-r border-light-40 dark:border-dark-80 z-10 sticky overflow-y-scroll"
+      class="hidden lg:flex flex-col lg:border-r border-light-40 dark:border-dark-80 z-10 sticky overflow-y-scroll"
       style="top: var(--nav-h); max-height: calc(100vh - var(--nav-h));"
     >
       <FilmGrain currentPath={Astro.url.pathname} />
-      <DocsSidebar framework={framework} style={style} docTitles={docTitles}>
+      <DocsSidebar framework={framework} style={style} docTitles={docTitles} class="flex-1">
         <Selectors client:load currentFramework={framework} currentStyle={style} currentSlug={slug} />
       </DocsSidebar>
     </aside>