openvibers/afresume Commits

fix: stable mobile hero layout - no more page jumping

OP OpenVibers committed 20 May 2026 · bb8ca35201 · 1 file, +14 −3

- Role rotator font-size: clamp(1.4rem, 5.5vw, 2.5rem) — was fixed at
  2.5rem on all viewports; was invisibly overflowing on narrow screens
- min-width:0 + overflow:hidden on grid cells — prevents grid items from
  forcing their track wider than the viewport (root cause of horizontal jank)
- contain:layout style on .hero__role — isolates rotator swap from
  triggering ancestor reflow
- hero__grid: 70svh (svh = stable small-viewport height, not affected by
  mobile browser chrome toggle) with min-height:auto on mobile so the
  section only takes what it needs when stacked
- min-height: 100vh fallback before 100svh for older mobile browsers
- Float animation disabled on mobile — removes pointless repaint churn

Changes

ddiff --git a/src/components/Hero.astro b/src/components/Hero.astro
iindex fdd2ada..170b9bd 100644
---- a/src/components/Hero.astro
++++ b/src/components/Hero.astro
@@@ -66,6 +66,7 @@
  <style>
    .hero {
      position: relative;
++    min-height: 100vh;
      min-height: 100svh;
      padding: 100px 0 40px;
      overflow: hidden;
@@@ -95,10 +96,18 @@
      grid-template-columns: 1.4fr 1fr;
      gap: clamp(24px, 4vw, 64px);
      align-items: center;
--    min-height: 70vh;
++    min-height: 70svh;
    }
++  /* min-width:0 prevents grid cells from overflowing their track */
++  .hero__left, .hero__right { min-width: 0; overflow: hidden; }
    @media (max-width: 880px) {
--    .hero__grid { grid-template-columns: 1fr; }
++    .hero__grid {
++      grid-template-columns: 1fr;
++      min-height: auto;
++      padding-bottom: 32px;
++    }
++    .hero__portrait-frame { animation: none; }
++    .hero__portrait { width: min(260px, 65vw); }
    }
  
    .hero__title {
@@@ -110,17 +119,19 @@
    }
    .hero__role {
      font-family: var(--font-display);
--    font-size: clamp(2.5rem,2.4vw,2.5rem);
++    font-size: clamp(1.4rem, 5.5vw, 2.5rem);
      color: var(--accent);
      margin: 0 0 1rem;
      height: 1.6em;
      overflow: hidden;
++    contain: layout style;
    }
    .hero__rotator {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
++    width: 100%;
    }
    .hero__lead {
      max-width: 56ch;