Repository navigation
Fix: take the mobile safe area from CSS, not a one-time read - #66
Merged
Merged
Conversation
SandObserver
added
bug
iOS reports its safe-area insets after the first paint and again after a rotation. The mobile layout read them once during boot, got zero, and built the phone home screen against an 18px fallback, so the first row sat under the status bar. The mobile resize path ignored the event that carried the real value. The insets now live in the stylesheet, the layout measures the box the stylesheet produced, and a probe sized by the insets drives a rebuild when they change. Settings gains the top inset it never had.
SandObserver
force-pushed
the
fix/mobile-safe-area-from-css
branch
from
August 14, 2026 20:46
cfaedd1 to
e254edc
Compare
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
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
--sa-top/--sa-bottomindashboard.cssasmax(env(safe-area-inset-*), scaled minimum)and reserve them in.mob-pagepadding, so the browser keeps the insets current..mob-page/.mob-grid/.mob-cellclasses; rows arerepeat(6,1fr)instead of a JavaScript pixel height.getBoundingClientRect) instead ofviewport - insets - reserves, and deletereadSafeInsets.sb,safe,avail,rhandcwfrommobileMetrics;pillBottomandcontentBottomare now distances above the CSS-reserved bottom.var(--sa-bottom)..sa-probeelement sized by the insets with aResizeObserverand rebuild the mobile layout when its box changes, skipping the initial observation.Testing
All green, except the Docker build smoke test, which has no local Docker and is left to CI. Rewrote
mobile-metrics.test.mjsaround the new contract and added 9 tests covering the CSS-owned insets, the measured grid box, the dock and pill anchors, the rebuild trigger, and the Settings inset.Checklist