fix(routes/index): scale down the adapter graph on small screens

[sukvvon]

The Framework Agnostic diagram on the landing page overflows its card on phones — the React and Solid nodes sit flush against the edges and read as clipped.

Cause

The node coordinates are hard-coded against a 320×128 grid, so the whole graph is scaled as a unit. scale-[1.35] exists to fill the 460px slot that only appears at lg (PrinciplePanel is w-full lg:w-[460px]), but the scale applied at every width.

At 375px the graph renders 432px wide inside a 311px slot — 121px of overflow.

Fix

Three steps instead of one fixed scale:

scale-90                  →  288px   (≤519px)
min-[520px]:scale-[1.2]   →  384px   (520–639px)
sm:scale-[1.35]           →  432px   (≥640px, unchanged)

Measured

Viewport	Graph	Slot	Headroom
360px	288px	296px	8px
375px	288px	311px	23px
596px	384px	516px	132px
1152px	432px	460px	28px — identical to before

Desktop rendering is byte-for-byte unchanged; only widths below sm are affected.

Why the middle step

The graph steps in discrete sizes while the slot grows continuously, so one value cannot serve both ends. Holding scale-90 up to sm leaves 244px of slack at 596px — more empty space than diagram. min-[520px] splits the difference.

Known gaps

• 320px (iPhone SE 1st gen) still overflows by 32px. Fixing it needs another breakpoint below 375px, which did not seem worth a fourth step.
• 420–519px and 600–639px carry 128–191px of slack. Filling those properly wants continuous scaling rather than steps — worth exploring separately, since the hard-coded 320×128 grid is what forces the step approach in the first place.

Draft while the continuous-scaling alternative is evaluated.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 80e336f5-2ecf-41ee-bdcc-07819cc5df82

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	6bdbdef	Commit Preview URL Branch Preview URL	Aug 04 2026, 12:49 PM