The oh-so-famous iPhone notch...

Describe the bug The oh-so-famous iPhone notch causing issues with the admin panel on mobile.

To Reproduce On any notched iPhone, open the browser, visit /admin/#/requests (or any page which has a table), check out the clipping.

Expected behavior No clipping with correct padding.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone X and above
• OS: ANY
• Browser ANY
• Version ANY

Additional context CSS_TRICKS has an amazing guide on this and it includes the proper way to handle this. To solve this, simply add the following to the body (or the container, etc):

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

PS: I did notice that you’re using using 100% screen-height, so this may be a little trickier for you. I remember I ran into a problem with it a while back. Can’t remember the exact details. But that’s it, just a heads up.

Edit: added screenshot

[AshDyson]

Addressed in the new UI build.

[angrycuban13]

Screenshot for prosperity