fix: safe padding for non-rectangular displays

closes #12199
closes #11188

diff --git a/scss/_global.scss b/scss/_global.scss
index dad62e6b591211708656f3f4d98008dc79554dce..f5dbec83b0e6779e7b4bda93d5842ae4d9fa5c91 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -158,6 +158,12 @@ $global-color-pick-contrast-tolerance: 0 !default;
     margin: 0;
     padding: 0;
 
+    // using environment variables to account for non-rectangular displays e.g. phones with notches
+    padding-top: env(safe-area-inset-top);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+
     background: $body-background;
 
     font-family: $body-font-family;