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

@@ -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">

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>