fix(feed): stop sticky tab bar from clipping the top of the feed#455
Merged
Conversation
The sticky relay tab bar (community + kitchen) pinned at twice the header height, leaving a header-tall gap where feed content scrolled through and was clipped, on both desktop and mobile. Root cause: #app-scroll reserves the fixed header via padding-top: var(--header-h), and a sticky child's `top` offset is measured from that container's content box (after the padding). Setting top: var(--header-h) on the tabs stacked a second header-height on top, pinning them at 2x. Fix: the padding already accounts for the header, so the sticky offset is top: 0. Also make --header-h a CSS-deterministic single source of truth so the reserved space is correct on the first frame with no ResizeObserver race: - Define --header-row-h / --header-h in app.css, responsive at the sm (640px) breakpoint where the search bar toggles the content height. The safe-area inset stays dynamic via max(env(safe-area-inset-top), 0.75rem). - Pin the header content row (.zh-root) to --header-row-h so the painted header height never depends on font/image load timing. - Apply .header-blur's safe-area top padding at all widths so the painted header always equals --header-h. - Drop the JS bind:clientHeight measurement and the hardcoded mobile tab-bar top override (top: calc(56px + env(...))). Verified: header bottom == pinned tab-bar top == reserved space, gap 0 at first paint and steady state, on desktop (1440) and mobile (390). Co-authored-by: Cursor <[email protected]>
Deploying frontend with
|
| Latest commit: |
e69199a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e21aea93.frontend-hvd.pages.dev |
| Branch Preview URL: | https://fix-feed-header-sticky-tabs.frontend-hvd.pages.dev |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ❌ Deployment failed View logs |
zapcooking-frontend | e69199a | Jun 19 2026, 01:47 PM |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ❌ Deployment failed View logs |
frontend | e69199a | Jun 19 2026, 01:49 PM |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Global/Following/Replies/Groups tab bar on the feed (and the kitchen tab bar) pinned at twice the header height, leaving a header-tall gap where feed content scrolled through and got clipped — on both desktop and mobile (reproduced in plain browsers, not PWA/Capacitor specific).
Root cause
#app-scrollreserves space for thefixedheader viapadding-top: var(--header-h). Aposition: stickychild'stopoffset is measured from that container's content box — i.e. after the padding. Sotop: var(--header-h)on the tab bar stacked a second header-height on top, pinning it at2 × --header-h.The fix: the padding already accounts for the header, so the sticky offset must be
top: 0.Also:
--header-his now a CSS-deterministic single source of truthPreviously
--header-hcame from a JSbind:clientHeightmeasurement seeded at64px, which lagged the real height (74px desktop / ~62px mobile) for ~3s on load (ResizeObserver race), and a hardcoded mobile override (top: calc(56px + env(...))) baked in a per-viewport magic number.--header-row-h/--header-hare defined inapp.css, responsive at thesm(640px) breakpoint — where the search bar toggles the header content height (measured: 37.77px → 50.36px). This is the correct breakpoint; 1023px would clip the search bar between 640–1023px.max(env(safe-area-inset-top), 0.75rem)— no JS, works at all widths (envis 0 on desktop/non-notched)..zh-root) is pinned to--header-row-h, so the painted header height equals--header-hon the first frame, independent of font/image load timing.bind:clientHeightmeasurement and the hardcoded mobile tab-bartopoverride.Before / after (pinned tab bar, measured via Playwright)
Gap is 0 at first paint and steady state on both breakpoints.
Files
src/app.css— define--header-row-h/--header-h(responsive at 640px)src/components/Header.svelte— pin.zh-rootto--header-row-hsrc/routes/+layout.svelte— drop JS header measurement;#app-scrollusesvar(--header-h);.header-blursafe-area padding at all widthssrc/routes/community/+page.svelte— tab bartop: 0; remove mobile overridesrc/routes/kitchen/+page.svelte— tab bartop: 0(same double-count bug)Test plan
Made with Cursor