Skip to content

fix(web): sit top chrome 8px below the status bar, as Google Maps does - #768

Merged
Medformatik merged 1 commit into
mainfrom
fix/web-top-safe-gap
Nov 4, 2026
Merged

Medformatik merged 1 commit into
mainfrom
fix/web-top-safe-gap

Conversation

@Medformatik

Copy link
Copy Markdown
Collaborator

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) in lib/layout.ts now gives max(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:

  • the search bar, the space reserved below it (sidebar, full-screen search results, street-level card and close button) and the category chip row;
  • the search-in-area chip, the weather widget and the desktop account avatar;
  • the driving and transit navigation banners, the search-along-route picker and the detail card shown beside them.

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.

Search bar before and after: 12 dp below the status bar, then 8 dp

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

  • Web vitest for lib/layout, components/navigation, search, map, panels and weather: 2,358 passed, including new tests for topInset and the search-bar clearance. tsc for apps/web, biome.
  • On a Pixel (Android 17), the installed dev app loading this branch's web build: the search bar and chips (pictured), and the driving navigation banner, which I left out of the screenshot because it shows the phone's location.
  • Not checked on the device: the street-level viewer (its coverage tiles do not load from the local setup), transit navigation, and iOS. Their offsets come from the same helper.

Release and upgrade impact

Product impact: ordinary

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.
@Medformatik
Medformatik merged commit 445862f into main Nov 4, 2026
23 checks passed
@Medformatik
Medformatik deleted the fix/web-top-safe-gap branch November 4, 2026 07:19
@github-actions github-actions Bot locked and limited conversation to collaborators Nov 4, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant