fix(feedback): Fix padding in crash report dialog #94681
+6
−0
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.
This padding will only kick-in on devices that have a "safe-zone" because of a notch or something like that.
The problem
Devices with a notch or something cutting into the screen have also defined a "safe-zone" where content can render below the notch. By default this makes it so that all the app content is un-obstructed to the user.
It's possible however to override this safe-zone, and render you own stuff around that notch. You can do this on a web-app by setting the following meta tags:
With these meta tags in place, if an end-user chooses to add your web-app to their device homescreen then it'll wrap that notch and be hard to read.
The fix is to add extra padding, based on the defined safe-zone. https://developer.mozilla.org/en-US/docs/Web/CSS/env
Some images to help illustrate things are below..
The Fix
The fix of course is to add some padding that overrides the default. As with all CSS, we're adding overrides for the browser that understand them. Browsers that don't understand
constant()
orenv()
or don't havesafe-area-inset-top
defined will ignore these overrides and use the original padding: 40px or 10px or whatever.You can test directly on a device by visiting https://pokemon-market.sentry.dev/feedback and adding the site to your homescreen. See getsentry/pokemon-market@a16d14a to see how i made the site app-capable.
Fixes #43715