Use Portal to put dialogs to the end of the document

client/coral-ui/components/Dialog.css

@@ -1,4 +1,3 @@
 
 .dialog {
-  position: fixed;
 }

client/coral-ui/components/Dialog.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
 import styles from './Dialog.css';
+import {Portal} from 'react-portal';
 
 export default class Dialog extends Component {
   static propTypes = {
@@ -53,13 +54,15 @@ export default class Dialog extends Component {
     const {children, className = '', onClose, onCancel, open, ...rest} = this.props; // eslint-disable-line
 
     return (
-      <dialog
-        ref={(el) => { this.dialog = el; }}
-        className={`mdl-dialog ${className} ${styles.dialog}`}
-        {...rest}
-      >
-        {children}
-      </dialog>
+      <Portal>
+        <dialog
+          ref={(el) => { this.dialog = el; }}
+          className={`mdl-dialog ${className} ${styles.dialog}`}
+          {...rest}
+        >
+          {children}
+        </dialog>
+      </Portal>
     );
   }
 }

package.json

@@ -160,6 +160,7 @@
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",
+    "react-portal": "^4.1.2",
     "react-recaptcha": "^2.2.6",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",

yarn.lock

@@ -7473,6 +7473,12 @@ react-paginate@^5.0.0:
     prop-types "^15.6.0"
     react-addons-create-fragment "^15.0.0"
 
+react-portal@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-recaptcha@^2.2.6:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-recaptcha/-/react-recaptcha-2.3.5.tgz#a5db337125bb00fb13c2fa2e4ebfbe8b0cd06bb7"