From fc4d7b59c2d0ae441d5ea578d048e2a65b45016d Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Sun, 28 Nov 2021 09:05:07 +0100
Subject: [PATCH] Fix paddings not taking unsafe area into account (#528)

Co-authored-by: Michael Mok <pmmmwh@gmail.com>
---
 overlay/components/PageHeader.js         |  4 +++-
 overlay/components/RuntimeErrorFooter.js |  4 +++-
 overlay/index.js                         | 10 ++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/overlay/components/PageHeader.js b/overlay/components/PageHeader.js
index 0a344b93..898d21a8 100644
--- a/overlay/components/PageHeader.js
+++ b/overlay/components/PageHeader.js
@@ -21,10 +21,12 @@ function PageHeader(document, root, props) {
   pageHeaderContainer.style.boxShadow = '0 1px 4px rgba(0, 0, 0, 0.3)';
   pageHeaderContainer.style.color = '#' + theme.white;
   pageHeaderContainer.style.left = '0';
+  pageHeaderContainer.style.right = '0';
   pageHeaderContainer.style.padding = '1rem 1.5rem';
+  pageHeaderContainer.style.paddingLeft = 'max(1.5rem, env(safe-area-inset-left))';
+  pageHeaderContainer.style.paddingRight = 'max(1.5rem, env(safe-area-inset-right))';
   pageHeaderContainer.style.position = 'fixed';
   pageHeaderContainer.style.top = props.topOffset || '0';
-  pageHeaderContainer.style.width = 'calc(100vw - 3rem)';
 
   const title = document.createElement('h3');
   title.innerText = props.title;
diff --git a/overlay/components/RuntimeErrorFooter.js b/overlay/components/RuntimeErrorFooter.js
index 294f4261..ab3201b6 100644
--- a/overlay/components/RuntimeErrorFooter.js
+++ b/overlay/components/RuntimeErrorFooter.js
@@ -24,10 +24,12 @@ function RuntimeErrorFooter(document, root, props) {
   footer.style.boxShadow = '0 -1px 4px rgba(0, 0, 0, 0.3)';
   footer.style.height = '2.5rem';
   footer.style.left = '0';
+  footer.style.right = '0';
   footer.style.lineHeight = '2.5rem';
+  footer.style.paddingBottom = '0';
+  footer.style.paddingBottom = 'env(safe-area-inset-bottom)';
   footer.style.position = 'fixed';
   footer.style.textAlign = 'center';
-  footer.style.width = '100vw';
   footer.style.zIndex = '2';
 
   const BUTTON_CONFIGS = {
diff --git a/overlay/index.js b/overlay/index.js
index d2895849..0a4d003b 100644
--- a/overlay/index.js
+++ b/overlay/index.js
@@ -73,8 +73,10 @@ function IframeRoot(document, root, props) {
   iframe.src = 'about:blank';
 
   iframe.style.border = 'none';
-  iframe.style.height = '100vh';
+  iframe.style.height = '100%';
   iframe.style.left = '0';
+  iframe.style.minHeight = '100vh';
+  iframe.style.minHeight = '-webkit-fill-available';
   iframe.style.position = 'fixed';
   iframe.style.top = '0';
   iframe.style.width = '100vw';
@@ -117,10 +119,14 @@ function OverlayRoot(document, root) {
     'Segoe UI Symbol',
   ].join(', ');
   div.style.fontSize = '0.875rem';
-  div.style.height = '100vh';
+  div.style.height = '100%';
   div.style.lineHeight = '1.3';
   div.style.overflow = 'auto';
   div.style.padding = '1rem 1.5rem 0';
+  div.style.paddingTop = 'max(1rem, env(safe-area-inset-top))';
+  div.style.paddingRight = 'max(1.5rem, env(safe-area-inset-right))';
+  div.style.paddingBottom = 'env(safe-area-inset-bottom)';
+  div.style.paddingLeft = 'max(1.5rem, env(safe-area-inset-left))';
   div.style.width = '100vw';
 
   root.appendChild(div);