fix(swingset): Mobile overflow

[alexcarpenter]

Description

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• Style

  • Improved layout stability and responsiveness across docs and sidebar for more consistent rendering.
  • Adjusted code block presentation for better spacing and horizontal scrolling.
  • Tweaked dark-theme code background for improved contrast and visual consistency.

• Documentation

  • Updated release metadata/changeset information.

[changeset-bot]

🦋 Changeset detected

Latest commit: f31b86c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
swingset	Ready	Preview, Comment	Jun 11, 2026 1:05am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Skipped		Jun 11, 2026 1:05am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 4a20a6b4-233f-45de-b6bf-13ed8da6fd36

📥 Commits

Reviewing files that changed from the base of the PR and between ce97221 and f31b86c.

📒 Files selected for processing (2)

• packages/swingset/src/app/globals.css
• packages/swingset/src/components/CodeBlock.tsx

✅ Files skipped from review due to trivial changes (2)

• packages/swingset/src/app/globals.css
• packages/swingset/src/components/CodeBlock.tsx

---

📝 Walkthrough

Walkthrough

Adds min-w-0 to DocsViewer and SidebarInset to prevent flexbox overflow, updates Shiki/codeblock styling and dark background variable, and records the change in a changeset.

Changes

UI styling updates

Layer / File(s)	Summary
Component styling updates for overflow handling packages/swingset/src/components/DocsViewer.tsx, packages/swingset/src/components/ui/sidebar.tsx	DocsViewer's <article> and SidebarInset's <main> receive the min-w-0 utility to constrain minimum width in flex containers.
Shiki and CodeBlock styling packages/swingset/src/app/globals.css, packages/swingset/src/components/CodeBlock.tsx	Change --shiki-background to an oklch(...) value and adjust the Tailwind selector/className used for rendered <pre> blocks to update background, overflow, and padding rules.
Changeset entry for styling updates .changeset/nine-streets-learn.md	Changeset file updated to document these styling/theme changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A rabbit hops through UI lands,
Tucks min-width zeros in tiny hands.
Code blocks glow with subtle hue,
Shiki's night wears oklch too.
Styles snug, the layout stands—hoppy review! 🐇✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'fix(swingset): Mobile overflow' is partially related to the changeset, referring to a real aspect of the changes (overflow/layout fixes via CSS and Tailwind classes), but doesn't capture the main point: a visual alignment of codeblock styling with sidebar design.	Consider updating the title to better reflect the actual intent, such as 'fix(swingset): Align codeblock styling with sidebar design' or 'style(swingset): Update codeblock background and layout classes', as the current title is vague about the primary change.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8824

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8824

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8824

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8824

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8824

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8824

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8824

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8824

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8824

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8824

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8824

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8824

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8824

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8824

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8824

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8824

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8824

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8824

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8824

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8824

commit: f31b86c

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/nine-streets-learn.md:
- Around line 1-2: Add a non-empty changeset entry documenting the fix to the
swingset package: create a changeset that bumps the swingset package version and
includes a short summary stating "Fix mobile overflow in swingset
(DocsViewer.tsx and sidebar.tsx)" and referencing the affected components
(DocsViewer.tsx, sidebar.tsx) so release notes reflect the UI fix; ensure the
changeset file contains the package name "swingset", the type of change
(patch/minor as appropriate), and the summary body rather than remaining empty.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 03131346-f620-4ab0-94f1-24f36d6b2cda

📥 Commits

Reviewing files that changed from the base of the PR and between b7cac0a and ce97221.

📒 Files selected for processing (3)

• .changeset/nine-streets-learn.md
• packages/swingset/src/components/DocsViewer.tsx
• packages/swingset/src/components/ui/sidebar.tsx