Repository navigation
fix(web): sit top chrome 8px below the status bar, as Google Maps does - #768
Merged
Merged
Conversation
Under a status bar the floating chrome added the page's own edge spacing on top of the inset: the search bar sat 12px below the bar and the turn-by-turn banner 16px. Google Maps leaves 8px above its search bar on Android; the status bar already sets the chrome apart from the edge. topInset(edge, below) in lib/layout now gives max(edge, inset + 8px), so a browser tab without an inset keeps its spacing. The search bar, its clearance, the chip row, the search-in-area chip, the weather widget, the desktop avatar, the navigation banner and the overlays aligned with it, and the street-level close button all take their top from it.
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
What changed and why
In the installed app the floating chrome sat further below the status bar than it needs to. Each element added the page's own edge spacing on top of the inset: the search bar sat 12px below the status bar, and the turn-by-turn banner 16px. On the same Pixel, Google Maps leaves 8px above its search bar; the status bar already separates the chrome from the edge of the screen.
topInset(edge, below)inlib/layout.tsnow givesmax(edge, inset + 8px). Under a status bar the chrome sits 8px below it; in a browser tab, where the inset is 0, the existing 12px or 16px stays. Every floating element at the top takes its offset from it:Full-screen dialogs, drawers, the settings and admin bars, and the bottom sheet's height cap are unchanged. Their content already starts directly below the status bar, as Google Maps' full-screen pages do.
Measured on the phone (density 2.44, status bar 161px): Google Maps' search pill starts at 180px. OpenMapX's started at 193px and now starts at 183px; the remaining 3px is the shadow. The driving banner moved from 202px to 183px, level with the search bar.
Verification
lib/layout,components/navigation,search,map,panelsandweather: 2,358 passed, including new tests fortopInsetand the search-bar clearance.tscforapps/web, biome.Release and upgrade impact
Product impact: ordinary