fix pane scroll bars, mobile menu background and add border radius to…

… all images

packages/site/pages/content-examples/kitchen-sink.mdx

@@ -46,6 +46,8 @@ codebase and identify vulnerabilities before they reach production.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+![Placeholder, blank image](https://via.placeholder.com/1000x350/d3d9df/d3d9df.png)
+
 ---
 
 ###### Do's and Don'ts

packages/theme/components/layout/nav-drawer/NavDrawer.tsx

@@ -5,6 +5,7 @@ import {XIcon} from '@primer/octicons-react'
 import {Drawer} from './Drawer'
 import type {PageItem} from 'nextra/normalize-pages'
 import {Sidebar} from '../sidebar/Sidebar'
+import {useColorMode} from '../../context/color-modes/useColorMode'
 
 type NavDrawerProps = {
   isOpen: boolean
@@ -13,6 +14,7 @@ type NavDrawerProps = {
 }
 
 export function NavDrawer({isOpen, onDismiss, navItems}: NavDrawerProps) {
+  const {colorMode} = useColorMode()
   return (
     <Drawer isOpen={isOpen} onDismiss={onDismiss}>
       <Box
@@ -41,13 +43,13 @@ export function NavDrawer({isOpen, onDismiss, navItems}: NavDrawerProps) {
           <Box sx={{flexDirection: 'column', display: 'flex'}}>{/* <PrimerNavItems items={primerNavItems} /> */}</Box>
         </Box>
         {navItems && navItems.length > 0 ? (
-          <ThemeProvider colorMode="day">
+          <ThemeProvider colorMode={colorMode}>
             <Box
               sx={{
                 flexDirection: 'column',
                 flex: '1 0 auto',
                 color: 'fg.default',
-                bg: 'canvas.default',
+                bg: 'canvas.subtle',
                 display: 'flex',
               }}
             >

packages/theme/components/layout/root-layout/Theme.tsx

@@ -85,7 +85,7 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                     siteTitle={siteTitle}
                   />
                 </PRCBox>
-                <PageLayout containerWidth="full" padding="none">
+                <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
                   <PageLayout.Content padding="normal">
                     <main>
                       <PRCBox sx={!isHomePage && {display: 'flex', maxWidth: 1600, margin: '0 auto'}}>
@@ -199,12 +199,12 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                     </main>
                   </PageLayout.Content>
                   <PageLayout.Pane
+                    aria-label="Sticky pane"
                     width="small"
                     sticky
                     padding="none"
                     position="start"
                     hidden={{narrow: true}}
-                    resizable
                     divider="line"
                   >
                     <Sidebar pageMap={docsDirectories} />

packages/theme/css/prose.module.css

@@ -239,6 +239,8 @@
   margin-left: auto;
   margin-right: auto;
   margin-block-end: var(--spacing);
+  border-radius: var(--brand-borderRadius-medium);
+  overflow: hidden;
 }
 
 /* ---------------------------------------------------------- */