Skip to content

fix(feedback): Fix padding in crash report dialog #94681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

ryan953
Copy link
Member

@ryan953 ryan953 commented Jul 1, 2025

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:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

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..

  • Web is fine no matter what
  • The app, with and without padding added
  • The fixed crash report dialog, with it's own padding (this PR)

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() or env() or don't have safe-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.

Website In Safari App - No Padding App - with padding App Crash Report - with padding
website app-no-padding app-padding crash-report

Fixes #43715

This padding will only kick-in on devices that have a "safe-zone" because of a notch or something like that.
@ryan953 ryan953 requested a review from a team July 1, 2025 04:37
@github-actions github-actions bot added the Scope: Backend Automatically applied to PRs that change backend components label Jul 1, 2025
cursor[bot]

This comment was marked as outdated.

cursor[bot]

This comment was marked as outdated.

Copy link

codecov bot commented Jul 1, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #94681      +/-   ##
==========================================
- Coverage   87.92%   87.92%   -0.01%     
==========================================
  Files       10427    10427              
  Lines      603265   603265              
  Branches    23473    23473              
==========================================
- Hits       530404   530391      -13     
- Misses      72355    72368      +13     
  Partials      506      506              

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Backend Automatically applied to PRs that change backend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Crash report positions itself outside safe area on iOS
2 participants