fix(routes/index): prevent npm downloads counter from overflowing on mobile

[sukvvon]

The npm downloads counter on the landing page runs out of room on small phones. Reported from an iPhone SE (375px), where the number reads as clipped.

Measurements

At 375px the stat block has 327px of usable width (375 − 24 − 24 from the panel's p-6). The counter renders in ui-monospace at text-4xl / 36px:

	Required	Available	Headroom
15,906,312,010 at 36px	303px	327px	24px
15,906,312,010 at 30px	253px	327px	74px

24px of headroom is already tight, and the value only grows — one more digit (crossing a trillion) needs 368px at 36px and overflows outright.

Fix

text-4xl → text-3xl sm:text-4xl, so phones render at 30px and everything from sm up is unchanged.

The per week / github stars pair below was checked too: at text-xl the widest (133,039,817, 132px) fits its 152px column, so it needs nothing.

Verified

Locally below the sm breakpoint the counter computes to 30px and measures 253px; at ≥640px it stays 36px / 303px as before.

Summary by CodeRabbit

• Style
  • Improved responsive typography for the npm downloads figure, making it more appropriately sized on smaller screens while preserving larger text on wider screens.

[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: d971ec96-0bd0-4db8-8750-403c3b0bdbda

📥 Commits

Reviewing files that changed from the base of the PR and between 20d57b8 and 1b6e492.

📒 Files selected for processing (1)

• src/routes/index.tsx

---

📝 Walkthrough

Walkthrough

The AdoptionProof npm downloads value now uses text-3xl by default and text-4xl at the sm breakpoint.

Changes

Adoption proof display

Layer / File(s)	Summary
Responsive downloads typography src/routes/index.tsx	The npm downloads value uses text-3xl sm:text-4xl instead of fixed text-4xl typography.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

• TanStack/tanstack.com#1105: Both PRs modify responsive typography in src/routes/index.tsx.

Suggested reviewers: tannerlinsley

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the mobile overflow fix for the npm downloads counter, which is the main change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/npm-downloads-mobile-overflow

---

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