fix: make the playground responsive on mobile

[Ghadi8]

What

The playground (/core and /wagmi) now works on phones. Below 768px the method list fills the screen,
tapping a method opens it full screen with a "‹ Methods" back button, and going back returns you to the
same spot in the list. Desktop looks exactly as before.

Why

The shell used a fixed two-column grid (334px | 1fr) inside an h-screen overflow-hidden wrapper. On a
phone that left the method panel about 50px wide, so the playground could not be used at all.

The sidebar is the navigation, so mobile shows the list and the detail one at a time instead of hiding
the sidebar in a drawer. The page scrolls normally on mobile instead of inside a locked full-height box.
The Dialog Theme view stacks the controls above the previews rather than using the list/detail flow,
because the two are meant to be used together.

Every mobile change is a max-md: / max-sm: class, or a base class whose desktop value moved behind
md:, so layout from 768px up is unchanged. The other mobile fixes:

• Info popovers open as a sheet along the bottom of the screen. Their fixed widths (352px / 290px),
  anchored to the right of the trigger, ran off the left edge.
• The header's SDK row hides its "SDK" label and uses less padding on its package buttons. Without this
  it was 343px wide and scrolled sideways on 320px screens.
• Method titles are smaller and can break anywhere, so long names like wallet_revokePermissions wrap.

The landing page already fit phone screens and is untouched.

Closes

How to test

bun install
bunx nx run-many -t typecheck lint test --projects=@jaw-mono/playground
bunx nx build @jaw-mono/playground

Run bunx nx dev @jaw-mono/playground and check both /core and /wagmi.

Desktop (≥768px): should look exactly as before. Before and after screenshots at 1440, 1024 and 768px are
pixel-identical for the landing page, both SDK pages with a method open, and the Dialog Theme view.

Mobile (devtools at 390px and 320px, or a real phone):

• The method list fills the screen and nothing scrolls sideways.
• Tapping a method opens it full screen, scrolled to the top, with "‹ Methods" at the top left.
• "‹ Methods" returns to the list at the scroll position you left.
• The ⓘ next to a method, and the one next to the SDK switch, open a sheet along the bottom of the
  screen, inside the viewport.
• Dialog Theme shows the controls with the previews below them.
• Code Snippet, View Config and a Utility method all fit the width. Wide code scrolls inside its own box.

[vercel]

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

Project	Deployment	Actions	Updated
demo	Ready	Preview	Sep 23, 2026 12:55pm UTC
jaw-docs	Ready	Preview	Sep 23, 2026 12:55pm UTC
keys-jaw-id	Ready	Preview	Sep 23, 2026 12:55pm UTC
playground	Ready	Preview	Sep 23, 2026 12:55pm UTC

[justalab-agents]

Findings outside the diff

These sit on lines this PR did not change, but this PR is what makes them wrong. They cannot be posted as inline comments.

• [WARNING] .github:2 — Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: amannn/action-semantic-pull-request@v5. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/

Reviewer callouts (1)

Non-blocking observations. Nothing here needs to change before merge.

• .github:1 — "The ubuntu-latest label will migrate to Ubuntu 26 beginning October 19, 2026. For more information, see actions/runner-images#14748"