fix(routes/index): scale the adapter graph to its container

[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 295px slot — 137px of overflow.

Fix

Derive the scale from the wrapper's own width via a container query:

<divclassName="@container flex w-full justify-center"><divref={rootRef}style={{transform: 'scale(clamp(0.75, calc(100cqw / 320px), 1.35))'}}className="relative h-32 w-[320px] shrink-0 origin-center …">

100cqw / 320px is the slot width ÷ the graph's authored width. The 1.35 cap is main's existing value, so anything at or above lg is untouched.

Measuring the slot directly avoids restating the ancestors' padding — an intermediate revision computed 100vw - 64px and was wrong, because px-4 contributes 32px (16 per side), not 16. Anything that re-derives the slot arithmetically has to be kept in sync with two separate padding declarations; cqw cannot drift.

Measured

Viewport	Slot	main	This PR	Scale
320px	240px	432px (overflows)	240px	0.75 (floor)
360px	280px	432px (overflows)	280px	0.875
375px	295px	432px (overflows)	295px	0.922
≥1024px	460px	432px	432px	1.35 (cap)

Slot widths are read from the DOM. Below lg the graph fills its slot exactly; the 0.75 floor is reached right at 320px, so nothing narrower is left unhandled.

Notes

• style over a Tailwind class — scale-[clamp(…)] does not compile; the element rendered with transform: none. The same component already sets transform inline for the flow dots, and adapterGraphStyle() / adapterGraphPointStyle() are inline-style helpers, so this fits the file.
• / 320px, not / 320 — dividing a length by a unitless number is rejected by the CSS parser; it has to be length ÷ length to yield a scalar.
• ref={rootRef} stays on the scaled element, not the new wrapper, so Pause offscreen homepage adapter motion #1093's in-view observer keeps watching the same box it did before.

Verification

Layout at each width above: scale, rendered width, and node bounds read from the DOM and compared against the slot — locally and on the deployed preview.

#1093's motion was confirmed by comparing successive screenshots (the node highlight advances React → Vue → Solid, and the flow dots sit at different points in each frame). Worth noting for anyone re-checking this: sampling element positions from injected JS reports the animation as frozen regardless of whether it is running, so screenshots are the only reliable check here.

Summary by CodeRabbit

• Improvements
  • The framework adapter graph now scales responsively to fit different viewport sizes.
  • The graph is centered within the available width for a more consistent viewing experience.
  • Existing animations, connections, nodes, and ports remain unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 65d52ad0-2de7-4fe1-9b8e-5b46cb4c77a7

📥 Commits

Reviewing files that changed from the base of the PR and between 4d4fd51 and 9ff2175.

📒 Files selected for processing (1)

• src/routes/index.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/routes/index.tsx

---

📝 Walkthrough

Walkthrough

FrameworkAdapterGraph now uses a centered, full-width container with container-width-based scaling capped between 0.75 and 1.35. Existing graph nodes, flows, ports, animation, and visibility behavior remain unchanged.

Changes

Responsive graph layout

Layer / File(s)	Summary
Responsive graph container and scaling src/routes/index.tsx	FrameworkAdapterGraph replaces the fixed 1.35 scale with clamped container-width scaling. The graph uses a centered full-width wrapper while retaining its existing rendering and motion behavior.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• TanStack/tanstack.com#1093: Both changes modify FrameworkAdapterGraph; this PR changes responsive layout, while the related PR changes its animation loops.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes scaling the adapter graph to fit its container, which is the main change.
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.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/adapter-graph-mobile-scale

---

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	9ff2175	Commit Preview URL Branch Preview URL	Aug 05 2026, 05:16 AM

[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 `@src/routes/index.tsx`:
- Line 621: Update the graph transform scale calculation at the visible
transform declaration to use an 80px viewport offset instead of 64px, and lower
the clamp minimum from 0.8 to 0.75. Preserve the existing maximum scale and
overall responsive scaling behavior.

🪄 Autofix

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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a53e3b1f-2d54-4771-af42-e651af62fa50

📥 Commits

Reviewing files that changed from the base of the PR and between 3321b67 and 9adc175.

📒 Files selected for processing (1)

• src/routes/index.tsx