Layout adapts when device is rotated to landscape

A hero section with height: 100vh becomes roughly 350px tall when the user rotates their phone to landscape. Headline, subhead, and CTA button get crammed into that tiny vertical window — often only the headline remains visible, with the CTA below the fold. 100vh also misbehaves on iOS Safari because mobile browser chrome shrinks and grows dynamically. 100dvh (dynamic viewport height) is the modern replacement that handles both cases correctly.

Replace height: 100vh with min-height: 100dvh so content can grow past the viewport when necessary, and add a landscape media query to reduce padding on short viewports. Update hero and full-screen overlay components in src/components/.

.hero { min-height: 100dvh; }
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding: 3rem 0; }
}

• ID: mobile-responsiveness.layout.landscape-support

• Severity: info

• What to look for: Check for landscape-specific media queries (@media (orientation: landscape) or @media (max-height: 500px)) in CSS. In Tailwind, look for landscape: variant usage. Examine whether fixed-height elements (hero sections with height: 100vh, modals, full-screen overlays) would become unusably cramped in landscape orientation on phones where viewport height drops to 300-500px.

• Pass criteria: Count all height: 100vh and h-screen declarations in the project. For each, classify as "content element" (renders text/interactive content) or "background wrapper" (purely decorative). No more than 0 content elements may use height: 100vh without a landscape media query override or min-height: 100dvh alternative. Report even on pass: "Found X instances of height: 100vh/h-screen; Y are content elements, Z have landscape overrides."

• Fail criteria: At least 1 content element uses height: 100vh (or Tailwind h-screen) without a landscape media query override or min-height: 100dvh alternative — content becomes cramped at approximately 350px height in landscape on phones.

  Pass when: No height: 100vh usage found, OR height: 100vh is accompanied by landscape adjustments, OR min-height: 100dvh is used instead.

• Skip (N/A) when: Never — check for landscape media queries in the codebase. Full visual verification across device rotations requires live URL testing.

• Detail on fail: "Hero section uses height: 100vh (or h-screen) with no landscape override — 1 of 3 content elements becomes approximately 350px tall in landscape on phones".

• Remediation:

  .hero { min-height: 100dvh; /* dynamic viewport height */ }
  
  @media (orientation: landscape) and (max-height: 500px) {
    .hero { min-height: auto; padding: 3rem 0; }
  }
  

  In Tailwind:

  <section class="min-h-screen landscape:min-h-0 landscape:py-12">