ReviewOS

also looking at this

stacks/commshq

fix(ui): keep the phone menu inside the visible viewport

#9
Merged glennmichael123 wants to merge fix/mobile-nav-dvh into main
2 files +16 -2
11 days ago

The phone menu was capped at calc(100vh - 6rem). On iOS Safari 100vh is the largest the viewport ever gets — with the browser chrome hidden — so with the bottom bar showing, the panel's last ~60px sat under it. It also had no overscroll containment and no page lock, so the first flick past the end of the list scrolled the page behind the menu instead of the menu.

  • 100dvh tracks the visible height. Crosswind emitting the arbitrary value was checked on the rendered page, not assumed: the panel's computed max-height is 716px (812 − 96) and the stylesheet carries 100dvh.
  • overscroll-contain keeps the flick inside the panel.
  • body:has(.mobile-menu[open]) { overflow: hidden } locks the page while the menu is open, scoped to max-width: 767px so the desktop feature menu is unaffected — verified at 1280: opening it leaves body overflow visible.

Measured at 375×812 on the rendered page: panel capped at 716px and scrollable (833px of content), "Start free" reachable at y=763, body locked while open, no horizontal overflow.

tests/Unit/MobileLayout.test.ts pins the dvh cap, the overscroll containment and the page lock. pickier's two remaining warnings on this file are class-order nits on lines this PR does not touch.

2 changed files on the files tab, with 0 review threads.

Sign in to comment on this pull request.