From ce972218b6824ab6401f33a37b7b664703b254bb Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 10 Jun 2026 20:57:20 -0400
Subject: [PATCH 1/2] fix(swingset): Mobile overflow

---
 .changeset/nine-streets-learn.md                | 2 ++
 packages/swingset/src/components/DocsViewer.tsx | 2 +-
 packages/swingset/src/components/ui/sidebar.tsx | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/nine-streets-learn.md

diff --git a/.changeset/nine-streets-learn.md b/.changeset/nine-streets-learn.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/nine-streets-learn.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx
index 30275bcb9c7..55b916967d2 100644
--- a/packages/swingset/src/components/DocsViewer.tsx
+++ b/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} />
diff --git a/packages/swingset/src/components/ui/sidebar.tsx b/packages/swingset/src/components/ui/sidebar.tsx
index 3a8582ce4d3..365d370115b 100644
--- a/packages/swingset/src/components/ui/sidebar.tsx
+++ b/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}

From f31b86c01166f3e0cae1d628689268c649faf82c Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 10 Jun 2026 21:03:56 -0400
Subject: [PATCH 2/2] update codeblock background to match sidebar

---
 packages/swingset/src/app/globals.css          | 2 +-
 packages/swingset/src/components/CodeBlock.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/swingset/src/app/globals.css b/packages/swingset/src/app/globals.css
index d0ab352778b..b9419f556fd 100644
--- a/packages/swingset/src/app/globals.css
+++ b/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;
diff --git a/packages/swingset/src/components/CodeBlock.tsx b/packages/swingset/src/components/CodeBlock.tsx
index fe012e2f5d4..d53361c9e40 100644
--- a/packages/swingset/src/components/CodeBlock.tsx
+++ b/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)]'>