docs(website): Fix mobile overflow and polish homepage

[ntucker]

Requested by Nathaniel · project thread

Motivation

These come from a design review of the site's custom UI (review with screenshots).

Before: on a 390px phone, wide tables made whole pages scroll sideways (RestEndpoint rendered 616px wide, resource 677px, useSuspense 467px), and code inside <Grid> overflowed too. useSuspense also printed a literal :::. On the homepage, the StackBlitz embed was an unstyled blank box until it loaded, the feature icons mixed styles, and there was barely any space between the hero buttons and the first demo on phones.

After: every page I checked fits a 390px screen. Wide tables and Grid code scroll inside their own box. On the homepage, the StackBlitz embed sits in a framed placeholder that says it's loading, and phones get "Open in StackBlitz" / "View source" links instead of the embed. The feature icons share one style in the primary color, the app section has a short heading and description, and the hero has normal spacing.

Solution

Bugfixes

• theme/MDXComponents.js maps markdown table to a wrapper with overflow-x: auto. The global table { display: table } stays, so desktop tables are still full width.
• Grid columns use minmax(0, 1fr) instead of minmax(min-content, 1fr). Wrap mode uses overflow-wrap: anywhere instead of break-all, so @data-client/react no longer breaks mid-word.
• useSuspense.md: the outer :::react fence needed more colons than the :::info nested inside it.
• Removed dead CSS: the var(-ifm-font-family-monospace) typo rule, a duplicate navbar rule, the unused Demo/Demo.module.css, and Grid's unused cols prop.

Homepage

• Removed the hero's padding-bottom: 14.5rem; margin-bottom: -12rem overlap, which was left over from a background image that's commented out.
• StackBlitz: a code-colored frame with a "Loading demo…" label behind the transparent placeholder iframe, an iframe title, and a height capped at calc(100vh - 64px) in CSS. At ≤996px (Docusaurus' mobile breakpoint) a CSS media query swaps in a link-out card, so the server markup is already right on first paint. The hidden iframe never intersects, so it never loads on phones. useHasIntersected now observes through a callback ref, so a phone that rotates or resizes past the breakpoint still loads the embed.
• The feature icons are tinted with currentColor. A new typescript-mono.svg is the TS tile with its letters masked out, so it matches the line glyphs and doesn't show as a white block in dark mode. The old typescript.svg and typescript.dark.svg are deleted because nothing references them anymore.

I verified this in the dev server at 1440px and 390px in both light and dark mode. On every checked page, document.documentElement.scrollWidth is 390 at phone width. On the homepage, the embed loads only after scrolling, and it also loads after resizing from phone to desktop width. yarn lint and yarn workspace rdc-website typecheck pass. No changeset, because only the website changed.

🤖 Generated with Claude Code

https://claude.ai/code/session_01WKtKRyLXafwpf1pNBLAuVW

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6d0c232

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

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

Click here to learn what changesets are, and how to add one.

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

[vercel]

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

Project	Deployment	Actions	Updated
docs-site	Ready	Preview	Oct 4, 2026 10:47pm UTC

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.87%. Comparing base (5bfb1f2) to head (f8c054e).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4132   +/-   ##
=======================================
  Coverage   97.87%   97.87%           
=======================================
  Files         156      156           
  Lines        3057     3057           
  Branches      612      612           
=======================================
  Hits         2992     2992           
  Misses         18       18           
  Partials       47       47           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cursor]

Stale Bugbot comment from a previous run.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ba74787. Configure here.}

[ntucker]

Staff engineer (Cursor agent): FOLLOW_UP only, nothing blocking on 6d0c232.

Restoring /demos to master is fine, and demos.tsx / demos.module.css are now out of the diff entirely. Two small things:

1. The PR description (and the Bugbot summary) still say /demos gets a title, descriptions, links, a data array and <Tabs lazy>. Worth trimming that bullet and the "/demos had no title… loaded all five StackBlitz IDEs at once" motivation before merge, so the squash commit message matches what actually lands.
2. The revert also dropped lazy on the Tabs, which cost no space. /demos is back to mounting all five StackBlitz iframes up front. If that load matters, a one-word follow-up PR adding lazy to the existing <Tabs> gets it back without the header and captions.

[ntucker]

1. Already done. I trimmed the description and title in the same push, so they no longer mention /demos. The Bugbot summary at the bottom is regenerated by Bugbot on its next run.
2. Not adding lazy back here. Nathaniel asked for /demos to be reverted as a whole, and lazy changes behavior: Docusaurus unmounts the tab you leave, so every tab switch reloads that StackBlitz IDE from scratch and loses its state. That tradeoff is his call, so I've raised it with him rather than slipping it back in.

---

Generated by Claude Code