Polish rendering-mode drawer visuals (the launch screenshot calling card)

[justin808]

Context

The rendering-mode drawer is the kit's "honest tradeoffs" calling card per the strategic plan — it tells visitors that the public landing uses RSC streaming while the authenticated dashboard uses classic SSR, with a structural explanation. This is the screenshot that ends up in HN/Twitter threads. Polish it so it photographs well: clean typography, good spacing, semantic structure, dark-mode-friendly.

Acceptance criteria

• Drawer uses shadcn primitives (Sheet, Card, or Dialog — pick what fits the existing layout pattern)
• Content: clear hierarchy with a heading like "Rendering on this page" and bullets/sections explaining:
  • This surface (/dashboard): classic SSR via Pro Node renderer — why (interactivity, type safety, no SEO/cold-load wins)
  • Public landing (/): RSC + streaming — why (TTFB, mobile perf, SEO)
  • Link out: "Full RSC streaming story → Hacker News demo," "Inertia head-to-head → Gumroad demo"
• Closing CTA: "Powered by React on Rails Pro → [licensing]" (the Pro link issue may add this; coordinate)
• Visual quality: clean spacing, readable line-length, no overflow, no truncated text on mobile
• Focus management: opening focuses first interactive element, Esc closes, focus returns to trigger button (already partially done per the earlier code review; verify)
• aria-labelledby points at the drawer heading
• Screenshots well at 1440x900 — take one for the README hero or for the HN post body

Files likely touched

• app/javascript/src/Dashboard/ror_components/DashboardApp.tsx (RenderingModeDrawer component)
• Possibly extract to app/javascript/src/components/RenderingModeDrawer.tsx

Notes / gotchas

• Coordinate with dashboard reskin owner — touch the same file; sequence after reskin
• The accessibility issues flagged in the earlier review (aria-labelledby, focus restoration) should be addressed here
• Avoid feature-blurb language; HN readers respond to honest tradeoff explanations

Wave + dependencies

• Wave: 3
• Owner mode: parallel-safe (focused component, after reskin)
• Blocked by: dashboard reskin (shares files; reskin sets the design system)
• Blocks: nothing

---

Part of the 2026-06-03 HN launch — see internal/planning/3357-react-on-rails-starter-launch.md. This is the marketing screenshot.