Keep the mobile header and announcements pinned while the page scrolls

[busbyk]

Description

Below lg, the header nav did not stay pinned while scrolling — it drifted over the page content instead. Found while reviewing the native danger map, but it predates that work and affects every page, so it is split out here rather than shipped inside a large feature PR.

Fixing the header surfaced several adjacent problems, and reviewing it turned up two more mobile header bugs that were already there. Those are all in here as separate commits, since they are separable and read better on their own.

Related Issues

None. Pre-existing; noticed incidentally.

Key Changes

The header pins below lg. MobileNav was position: fixed with no top. A fixed element without an offset resolves to its static position — beneath the announcement banners — and then holds that viewport offset forever, so everything scrolled underneath it and the nav sat over the content. The h-[64px] spacer that reserved the space the fixed nav took out of the flow is gone with it, since a sticky element occupies its own space.

The sticky element is a wrapper around the banners and the header, not the header itself. A sticky element only stays put while its containing block is in view, and neither the nav nor the header is much taller than its own box, so either one alone would unstick almost immediately. Announcements.tsx now wraps the banners and the header in one sticky block. Above lg that wrapper is static and everything behaves exactly as it does on main.

Announcements pin with the header. Previously the banners sat above the header in the flow and scrolled away. Expanding one while scrolled down did nothing visible: the banner grew off the top of the screen and scroll anchoring held your place, so the only way to read it was to scroll back to the top. Now it is on screen wherever you are. Because a pinned banner is permanent screen real estate, the banners cap at 35dvh below lg and scroll internally past that — a 2000px announcement renders 282px tall on an 806px viewport instead of taking the whole phone.

The header no longer covers the admin bar. AdminBar is fixed top-0 z-50; the header is also z-50 and later in the DOM, so a header pinned at top: 0 won and hid it from logged-in editors. AdminBar now publishes its height as --admin-bar-height and the sticky wrapper pins below it. Raising the admin bar's z-index instead would have put it over the hamburger button.

The mobile menu panel tracks the header. Its top and max-height now both derive from the same measured header bottom (in dvh), where the max-height was previously hardcoded against a 64px offset and could run the panel past the bottom of the viewport with no way to scroll to it. The measurement re-runs on a frame while the menu is open, so the panel follows the header when the banners animate open or closed underneath it.

The logo is centered in the mobile header. The row was flex justify-between over three children, so when a center had no active announcements the toggle did not render and the logo was pushed to the right edge. A spacer opposite the hamburger would not have fixed it either — the hamburger is 40px and the toggle is 36px, so the logo was a couple of pixels off center even when the toggle was present. It is three grid tracks with equal outer columns now.

Anchor targets clear the pinned header via scroll-pt-16 lg:scroll-pt-0. There are no in-page anchors in the app today; this is so the next one does not land underneath the header.

Expanding from the desktop pill scrolls back to the banners. Desktop has the same off-screen-expansion problem, and since the header is not sticky there, pinning is not the answer — the fixed pill returns you to the top instead, honoring prefers-reduced-motion.

How to test

1. Open any tenant page (e.g. nwac.localhost:3000) at a viewport narrower than 1024px.
2. Scroll down. The header should pin to the top of the viewport with content passing beneath it. Before this change it drifted over the content and overlapped it.
3. With an announcement active, collapse it from the megaphone toggle, scroll down, then expand it again. The announcement should appear pinned above the header without moving you off your place on the page. Collapsing should likewise leave you where you are.
4. Open the mobile menu after scrolling. The dropdown should align flush to the bottom of the header, and should not extend past the bottom of the viewport. Collapse the announcements from the megaphone while the menu is open — the dropdown should follow the header up.
5. On a center with no active announcements (SAC in the local seed), check that the logo is centered rather than pushed right.
6. Log in and repeat at mobile widths: the admin bar should stay visible above the pinned header rather than being covered by it.
7. At lg and wider, everything should be unchanged — static header, banners scrolling away, and the collapsed pill scrolling you back to the top when expanded.

Screenshots / Demo video

Demo of the original sticky-header commit: https://www.loom.com/share/49c80858169d46579c391bf6b582ec06

Note that the Loom predates the later commits — it shows the banners scrolling away before the header pins, which is no longer how it behaves. Worth re-recording before merge.

Migration Explanation

None — presentational only.

Future enhancements / Questions

• The 35dvh cap on pinned announcements is a judgment call, not a researched number. Worth a look on a real device with a genuinely long announcement.
• Verified in Chrome at emulated mobile and desktop widths against the local seed, not on physical hardware. iOS Safari is the one worth a spot check, since it is the primary mobile target and dvh plus sticky is where it historically differs.
• The desktop header is still not sticky. That is deliberate and unchanged here, but if it should be, the wrapper is now the natural place to do it.

🤖 Generated with Claude Code

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}

[github-actions]

Preview deployment: https://fixxmobile-header-sticky.preview.avy-fx.org