Skip to content

fix(web): keep full-screen surfaces clear of the system bars - #765

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

Medformatik merged 1 commit into
mainfrom
fix/web-safe-area-overlays

Conversation

@Medformatik

Copy link
Copy Markdown
Collaborator

What changed and why

The installed app draws the page under the status and navigation bars (viewport-fit=cover). Several full-screen surfaces ignored the safe-area insets, so their controls sat under the clock and battery icons. In the street-level viewer the info card also started under the search bar, which covered its back arrow: tapping it opened the menu instead.

  • Dialogs and drawers, from the theme. Every MUI dialog and drawer now gets the insets: a full-screen dialog pads its content, a floating dialog is sized within the safe area, and a drawer pads the edges it touches. This fixes the hamburger menu, the command palette and the place import dialog, which had no inset. The shared mobileFullScreenDialogPaperSx drops its own top and bottom padding, which the theme now provides along with left and right insets for landscape.
  • Street-level viewer. The info card starts below the search bar. On phones the close button sits below the search bar beside the card, which is narrowed to make room, and the minimap clears the navigation bar.
  • Photo gallery. Its full-screen overlay pads all four edges.
  • Bottom sheet. Its full height is capped so it never reaches under the status bar. On the Pixel used here it already cleared it; shorter screens did not.
  • Admin. The impersonation banner and the admin top bar grow by the top inset.

In a plain browser tab the insets are 0, so desktop and ordinary mobile browsing are unchanged.

Street-level viewer, before After
Info card under the search bar, close button in the status bar Card and close button below the search bar
Menu, before After
Menu header and close button under the clock Menu header below the status bar
Photo gallery, before After
Gallery title and buttons under the clock Gallery title and buttons below the status bar

"Before" shots come from the release app against openmapx.com; "after" shots from the dev app loading this branch's web build. In the "before" viewer and menu shots the street photo and minimap are blurred because they showed a location near me; the "after" viewer shows a different, public spot in Cologne. The red badge in the "after" shots is the Next.js dev overlay; its errors are terrain tiles the local proxy fetches cross-origin.

Verification

  • On a Pixel (Android 17) in the installed app with this web build: the menu, the photo gallery, the street-level viewer and Settings. Settings looks identical before and after, so the theme padding and the shared style do not stack. The viewer's back arrow closes the viewer again.
  • Web vitest project: 615 files, 5,850 tests passed. tsc for apps/web, biome.
  • Not checked: iOS, landscape, the admin pages and the impersonation banner on a device.

Release and upgrade impact

Product impact: ordinary

The installed app draws the page under the status and navigation bars
(viewport-fit=cover). Several full-screen surfaces ignored the safe-area
insets, so their controls sat under the clock and battery icons:

- Every MUI dialog and drawer now gets the insets from the theme: a
  full-screen dialog pads its content, a floating one is sized within the
  safe area, and a drawer pads the edges it touches. This covers the
  hamburger menu, the command palette and the place import dialog, which
  had no inset, and replaces the shared paper style's own top and bottom
  padding.
- The street-level viewer's info card and close button start below the
  search bar instead of under it and the status bar, and its minimap
  clears the navigation bar.
- The place photo gallery pads all four edges.
- The bottom sheet's full height never reaches under the status bar.
- The impersonation banner and the admin top bar grow by the top inset.
@Medformatik
Medformatik enabled auto-merge (squash) November 3, 2026 23:57
@Medformatik
Medformatik merged commit 9dc8193 into main Nov 4, 2026
23 checks passed
@Medformatik
Medformatik deleted the fix/web-safe-area-overlays branch November 4, 2026 00:03
@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