fix(routes/index): hold the hero height with 'svh' instead of 'dvh'

[sukvvon]

On iOS, scrolling the landing page makes the hero card jump taller mid-scroll.

Cause

The hero is sized with h-[calc(100dvh-var(--navbar-height))]. The dynamic viewport unit tracks the URL bar: as Safari collapses it during a scroll, 100dvh grows and the card grows with it. That is the unit behaving as specified — it just isn't what a full-bleed hero wants.

svh resolves against the small viewport (URL bar expanded) and does not change while scrolling, so the card keeps its height.

Scope

Only the hero. I went through the other 21 dvh usages and none have the same problem — the symptom needs a page that scrolls, a fixed height, and an element that visibly fills the viewport, and only the hero has all three:

Usage	Count	Why it's fine
h- on game/builder/sidebar	5	overflow-hidden or self-scrolling, so the page never scrolls and the URL bar never collapses
max-h on sidebars, TOC, drawers	9	Growing with the URL bar gives more room — arguably the point
min-h	5	Only reacts when content exceeds it, so nothing jumps
SearchModal	3	Page scroll is locked while open, and each is bounded by a min(...)

styles/shop.css already uses svh for the product sheet, so the unit is not new here.

Testing

Confirmed on an iPhone: the hero no longer stretches mid-scroll.

Desktop is unchanged by construction — with no collapsible URL bar, svh, lvh, dvh, and vh all resolve identically (886px for all four locally), and max-h-[720px] caps the hero at 720px either way. The change only has an effect where svh < lvh, which is why a real device was the only way to verify it.

Summary by CodeRabbit

• Bug Fixes
  • Prevented the mobile hero section from resizing when the browser’s URL bar appears or disappears.

[coderabbitai]

📝 Walkthrough

Walkthrough

The hero container now uses 100svh instead of 100dvh. A comment documents that this prevents resizing when the mobile browser URL bar changes visibility.

Changes

Hero viewport sizing

Layer / File(s)	Summary
Hero height calculation src/routes/index.tsx	The hero container uses 100svh instead of 100dvh. An explanatory comment documents the behavior.

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

Suggested reviewers: tannerlinsley

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change from 100dvh to 100svh for the hero height.

✨ 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/hero-viewport-height

---

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	f57839a	Commit Preview URL Branch Preview URL	Aug 05 2026, 03:06 AM