Tidied up styles tobe more mobile Safari friendly

Author: Brian Vaughn

packages/react-error-overlay/src/components/overlay.js

@@ -1,7 +1,7 @@
 /* @flow */
 import { applyStyles } from '../utils/dom/css';
 import {
-  craContainer,
+  containerStyle,
   overlayStyle,
   headerStyle,
   additionalStyle,
@@ -32,19 +32,13 @@ function createOverlay(
   const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false }));
   // Create overlay
   const overlay = document.createElement('div');
-  overlay.addEventListener('click', function(event: Event) {
-    // Clicks to background layer dismiss the popup
-    // Prevent clicks within the panel from accidentally dismissing
-    event.stopPropagation();
-  });
   applyStyles(overlay, overlayStyle);
-  overlay.appendChild(createClose(document, closeCallback));
 
   // Create container
   const container = document.createElement('div');
-  applyStyles(container, craContainer);
-  container.className = 'cra-container';
+  applyStyles(container, containerStyle);
   overlay.appendChild(container);
+  container.appendChild(createClose(document, closeCallback));
 
   // Create additional
   const additional = document.createElement('div');
@@ -90,6 +84,14 @@ function createOverlay(
   // Show message
   container.appendChild(createFooter(document));
 
+  // Clicks to background overlay should dismiss error popup.
+  overlay.addEventListener('click', closeCallback);
+
+  // Clicks within the popup should not dismiss it.
+  container.addEventListener('click', function(event: Event) {
+    event.stopPropagation();
+  });
+
   return {
     overlay,
     additional,

packages/react-error-overlay/src/overlay.js

@@ -80,9 +80,11 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
     }
     if (document.body != null) {
       document.body.style.margin = '0';
-      document.body.appendChild(overlay);
-      // Clicks to background overlay should dismiss error popup
-      (document.body: any).addEventListener('click', unmount);
+      // Keep popup within body boundaries for iOS Safari
+      // $FlowFixMe
+      document.body.style['max-width'] = '100vw';
+
+      (document.body: any).appendChild(overlay);
     }
     additionalReference = additional;
   };

packages/react-error-overlay/src/styles.js

@@ -7,52 +7,46 @@ const black = '#293238',
   white = '#ffffff';
 
 const iframeStyle = {
-  'background-color': 'rgba(0,0,0,.5)',
   position: 'fixed',
-  top: '1em',
-  left: '1em',
-  bottom: '1em',
-  right: '1em',
-  width: 'calc(100% - 2em)',
-  height: 'calc(100% - 2em)',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
   border: 'none',
-  'border-radius': '3px',
-  'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
   'z-index': 1337,
 };
 
 const overlayStyle = {
-  position: 'absolute',
-  top: '0.5rem',
-  left: '50%',
-  'margin-left': '0',
-  'margin-right': '-50%',
-  transform: 'translate(-50%, 0)',
-  display: 'inline-block',
-  margin: '0.5rem',
-  'max-height': 'calc(100% - 1rem)',
-  'max-width': 'calc(100% - 1rem)',
+  width: '100%',
+  height: '100%',
+  'box-sizing': 'border-box',
+  'background-color': 'rgba(0,0,0,.5)',
+  padding: '0.5rem',
+  'text-align': 'center',
+};
+
+const containerStyle = {
+  position: 'relative',
+  display: 'inline-flex',
+  'flex-direction': 'column',
+  'max-height': '100%',
+  'max-width': '100%',
+  'overflow-x': 'hidden',
+  'overflow-y': 'auto',
+  padding: '0.5rem',
   'box-sizing': 'border-box',
-  padding: '0 1rem',
+  'text-align': 'start',
   'font-family': 'Consolas, Menlo, monospace',
   'font-size': '10px',
-  color: black,
   'white-space': 'pre-wrap',
-  overflow: 'auto',
-  'overflow-x': 'hidden',
   'word-break': 'break-word',
   'line-height': 1.5,
   'background-color': white,
+  color: black,
   'border-radius': '0.25rem',
   'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.15)',
 };
 
-const craContainer = {
-  display: 'flex',
-  'flex-direction': 'column',
-  'max-height': '100%',
-};
-
 const hintsStyle = {
   color: darkGray,
 };
@@ -83,8 +77,8 @@ const headerStyle = {
   'font-family': 'sans-serif',
   color: red,
   'white-space': 'pre-wrap',
+  margin: '0.75rem 2rem 0 0', // Prevent overlap with close button
   flex: '0 0 auto',
-  margin: '0.75rem 0 0',
 };
 
 const functionNameStyle = {
@@ -102,8 +96,9 @@ const anchorStyle = {
 
 const traceStyle = {
   'font-size': '1em',
+  flex: '0 1 auto',
+  'min-height': '0px',
   overflow: 'auto',
-  flex: '1 1 auto',
 };
 
 const depStyle = {};
@@ -175,13 +170,13 @@ const groupElemRight = Object.assign({}, _groupElemStyle, {
 const footerStyle = {
   'font-family': 'sans-serif',
   color: darkGray,
-  flex: '0 0 auto',
   'margin-top': '0.5rem',
   'margin-bottom': '1rem',
+  flex: '0 0 auto',
 };
 
 export {
-  craContainer,
+  containerStyle,
   iframeStyle,
   overlayStyle,
   hintsStyle,