fix(swingset): Mobile overflow (#8824)

Author: alexcarpenter

.changeset/nine-streets-learn.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/app/globals.css

@@ -12,7 +12,7 @@ body {
 /* Shiki css-variables theme — dark code block regardless of page light/dark mode */
 :root {
   --shiki-foreground: #e2e8f0;
-  --shiki-background: #0d0d14;
+  --shiki-background: oklch(0.205 0 0);
   --shiki-token-constant: #93c5fd;
   --shiki-token-string: #86efac;
   --shiki-token-comment: #64748b;

packages/swingset/src/components/CodeBlock.tsx

@@ -60,7 +60,7 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
         // safe: shiki output is developer-controlled source code
         <div
           dangerouslySetInnerHTML={{ __html: html }}
-          className='[&>pre]:overflow-auto [&>pre]:bg-transparent [&>pre]:p-4'
+          className='[&>pre]:bg-transparent! [&>pre]:overflow-auto [&>pre]:p-4'
         />
       ) : (
         <pre className='overflow-auto p-4 text-[var(--shiki-foreground)]'>

packages/swingset/src/components/DocsViewer.tsx

@@ -38,7 +38,7 @@ export function DocsViewer({ slug }: DocsViewerProps) {
       key={slug}
       meta={meta}
     >
-      <article className='prose relative mx-auto max-w-3xl p-8'>
+      <article className='prose relative mx-auto w-full min-w-0 max-w-3xl p-8'>
         {meta?.source ? (
           <div className='absolute right-8 top-8'>
             <ViewSource source={meta.source} />

packages/swingset/src/components/ui/sidebar.tsx

@@ -289,7 +289,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
     <main
       data-slot='sidebar-inset'
       className={cn(
-        'bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+        'bg-background relative flex w-full min-w-0 flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
         className,
       )}
       {...props}