fix(stats): mobile header — doubled notch inset + misaligned range picker#132
Merged
Conversation
…ange picker The Stats header renders inside AppShell below the app bar, which already pays env(safe-area-inset-top); its own safe-top doubled the inset into a ~59pt dead band on the installed PWA. The range picker kept ml-auto when wrapping under the title on phones, floating right with dead space — it now takes a full-width, left-aligned row (scrollable if cramped). The scroll indicator passing under the translucent sticky header is native iOS behavior (indicators run under translucent bars) and is much less prominent once the dead band is gone. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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.
Overnight run PR 1/12 — merge this first; the stack builds on it in order.
Fixes the two layout bugs from the phone screenshots (2026-07-18):
env(safe-area-inset-top)— its ownsafe-toppaid the ~59pt dynamic-island inset a second time. Removed; the header now sits flush.ml-autoand floated right with dead space to their left. Onmax-smthe control now takes a full-width, left-aligned row (with horizontal scroll if ever cramped).About the scroll indicator behind the header: with the dead band gone, what remains is the indicator passing under the translucent sticky header — which is native iOS behavior (scroll indicators run under translucent bars in system apps too). Judge it on the device with this fix in; if it still reads wrong, the escape hatch is making the header opaque or non-sticky on phones — say the word.
Verified: WebKit iPhone-13 viewport screenshot (gap gone, picker aligned); frontend build/typecheck clean. The safe-area double-inset itself can't be reproduced in emulation (no fake env insets) but the class removal is deterministic.