From ef7fe822bd1ab96292e6d37bfd4f77d91fe03d00 Mon Sep 17 00:00:00 2001
From: Joe Workman <joe@workmanmail.com>
Date: Wed, 1 Sep 2021 10:55:46 -0700
Subject: [PATCH] fix: safe padding for non-rectangular displays

closes #12199
closes #11188
---
 scss/_global.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/scss/_global.scss b/scss/_global.scss
index dad62e6b5..f5dbec83b 100644
--- 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;
-- 
2.47.2