Fix paddings not taking unsafe area into account (#528)

Co-authored-by: Michael Mok <[email protected]>

Author: wojtekmaj

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;

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 = {

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);