diff --git a/design-system/docs/app/(site)/layout.tsx b/design-system/docs/app/(site)/layout.tsx
index 03c127b85..bcaa83a96 100644
--- a/design-system/docs/app/(site)/layout.tsx
+++ b/design-system/docs/app/(site)/layout.tsx
@@ -28,7 +28,14 @@ export default async function RootLayout({
 }) {
   return (
     <NextRootProvider fontClassName={inter.variable}>
-      <head>{nextRootScript}</head>
+      <head>
+        {nextRootScript}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: /* css */ `html, body { height: 100%; }`,
+          }}
+        />
+      </head>
       <body>
         <Layout navigation={await getNavigation()}>{children}</Layout>
       </body>
diff --git a/design-system/docs/components/content/index.tsx b/design-system/docs/components/content/index.tsx
index 7ba118cb7..390aaac54 100644
--- a/design-system/docs/components/content/index.tsx
+++ b/design-system/docs/components/content/index.tsx
@@ -54,7 +54,8 @@ type ElementProps = HTMLAttributes<HTMLDivElement>;
 
 const Content = (props: ElementProps) => {
   return (
-    <Box
+    <Flex
+      direction="column"
       flex
       marginX="auto"
       marginTop={{ mobile: HEADER_HEIGHT, tablet: 'large' }}
@@ -63,6 +64,7 @@ const Content = (props: ElementProps) => {
     >
       {/* PROSE */}
       <Flex
+        flex
         direction="column"
         gap="xlarge"
         // elementType="article"
@@ -75,7 +77,7 @@ const Content = (props: ElementProps) => {
           &copy; {new Date().getFullYear()} @jossmac
         </Text>
       </Box>
-    </Box>
+    </Flex>
   );
 };
 
diff --git a/design-system/docs/components/layout.tsx b/design-system/docs/components/layout.tsx
index 42bac4d72..ab04681c5 100644
--- a/design-system/docs/components/layout.tsx
+++ b/design-system/docs/components/layout.tsx
@@ -16,7 +16,7 @@ export function Layout({
   return (
     <SidebarProvider>
       <Flex
-        height="100vh"
+        height="100%"
         // create a stacking context for app contents, ensuring portalled
         // dialogs etc. are always on top w/o z-index hacks
         UNSAFE_style={{ isolation: 'isolate' }}
diff --git a/design-system/docs/components/sidebar/sidebar.tsx b/design-system/docs/components/sidebar/sidebar.tsx
index a7462b074..e12d010b7 100644
--- a/design-system/docs/components/sidebar/sidebar.tsx
+++ b/design-system/docs/components/sidebar/sidebar.tsx
@@ -1,4 +1,5 @@
-import { Fragment, useEffect } from 'react';
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
 
 import { Button } from '@keystar/ui/button';
 import { menuIcon } from '@keystar/ui/icon/icons/menuIcon';
@@ -15,67 +16,55 @@ import { ColorSchemeMenu } from '../theme-switcher';
 
 /** Responsively render sidebar navigation items. */
 export const Sidebar = ({ items }: { items: SidebarItem[] }) => {
-  // const [headerHeight, setHeaderHeight] = useState(NaN);
   const { sidebarIsOpen, closeSidebar, toggleSidebar } = useSidebarContext();
+  const pathname = usePathname();
 
   useEffect(() => {
-    addEventListener('popstate', closeSidebar);
-    return () => {
-      removeEventListener('popstate', closeSidebar);
-    };
-  }, [closeSidebar]);
+    // Close the sidebar when the pathname changes
+    closeSidebar();
+  }, [closeSidebar, pathname]);
 
   return (
-    <Fragment>
-      <div
-        data-open={sidebarIsOpen}
-        className={css({
-          backgroundColor: tokenSchema.color.background.canvas,
-          display: 'flex',
-          flexDirection: 'column',
-          position: 'fixed',
-          zIndex: 1,
+    <div
+      data-open={sidebarIsOpen}
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'fixed',
+        width: '100%',
+        zIndex: 1,
+        '&[data-open=true]': {
+          height: '100%',
+        },
+        [breakpointQueries.above.mobile]: {
+          height: '100%',
+          width: SIDEBAR_WIDTH,
+        },
+      })}
+    >
+      <SidebarHeader menuIsOpen={sidebarIsOpen} onMenuPress={toggleSidebar} />
 
+      <Box
+        flex
+        minHeight={0}
+        backgroundColor="surface"
+        borderTopEndRadius={{ tablet: 'medium' }}
+        overflow="hidden auto"
+        paddingBottom="xlarge"
+        paddingTop={{ mobile: 'large', tablet: 'xlarge' }}
+        paddingEnd={{ mobile: 'large', tablet: 'xlarge' }}
+        data-open={sidebarIsOpen}
+        UNSAFE_className={css({
           [breakpointQueries.below.tablet]: {
-            width: '100vw',
-            '[data-open=true]': {
-              height: '100%',
+            '&[data-open=false]': {
+              display: 'none',
             },
           },
-          [breakpointQueries.above.mobile]: {
-            height: '100%',
-            width: SIDEBAR_WIDTH,
-          },
         })}
       >
-        <SidebarHeader
-          menuIsOpen={sidebarIsOpen}
-          onMenuPress={toggleSidebar}
-          // onLayout={rect => setHeaderHeight(rect.height)}
-        />
-
-        <Box
-          flex
-          backgroundColor="surface"
-          borderTopEndRadius={{ tablet: 'medium' }}
-          overflow="hidden auto"
-          paddingBottom="xlarge"
-          paddingTop={{ mobile: 'large', tablet: 'xlarge' }}
-          paddingEnd={{ mobile: 'large', tablet: 'xlarge' }}
-          data-open={sidebarIsOpen}
-          UNSAFE_className={css({
-            [breakpointQueries.below.tablet]: {
-              '&[data-open=false]': {
-                display: 'none',
-              },
-            },
-          })}
-        >
-          <NavItems items={items} />
-        </Box>
-      </div>
-      {/* <Box height={headerHeight} isHidden={{ above: 'mobile' }} /> */}
-    </Fragment>
+        <NavItems items={items} />
+      </Box>
+    </div>
   );
 };
 
@@ -84,11 +73,9 @@ export const Sidebar = ({ items }: { items: SidebarItem[] }) => {
 
 function SidebarHeader({
   menuIsOpen,
-  // onLayout,
   onMenuPress,
 }: {
   menuIsOpen: boolean;
-  // onLayout: (rect: DOMRect) => void;
   onMenuPress: () => void;
 }) {
   const menuLabel = 'Open navigation panel';
diff --git a/design-system/docs/next.config.mjs b/design-system/docs/next.config.mjs
index a031c2203..1dd367d7b 100644
--- a/design-system/docs/next.config.mjs
+++ b/design-system/docs/next.config.mjs
@@ -4,17 +4,10 @@ import withPreconstruct from '@preconstruct/next';
 const nextConfig = {
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
+  serverExternalPackages: ['esbuild'],
   experimental: {
-    serverComponentsExternalPackages: ['esbuild'],
     externalDir: true,
   },
-  // reactStrictMode: true,
-  // webpack: config => ({
-  //   ...config,
-  //   infrastructureLogging: {
-  //     level: 'error',
-  //   },
-  // }),
 };
 
 export default withPreconstruct(nextConfig);
