Repository navigation
fix(web): keep full-screen surfaces clear of the system bars - #765
Merged
Merged
Conversation
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.
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
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.mobileFullScreenDialogPaperSxdrops its own top and bottom padding, which the theme now provides along with left and right insets for landscape.In a plain browser tab the insets are 0, so desktop and ordinary mobile browsing are unchanged.
"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
tscforapps/web, biome.Release and upgrade impact
Product impact: ordinary