Fix scrolling of long modal dialogs

NOTE: react-modal removed the ability to select where the modal div is inserted into in version 1.3.0. This is because aria-hidden (i.e. "ignore this" for screenreaders) is added to the rest of the app, but now that the modal is also included in the app, it gets hidden from screenreaders as well. There's currently a PR open (reactjs/react-modal#183) that tries to address this, so we might see the return of this feature at some point. We should upgrade then.

package.json

@@ -95,7 +95,7 @@
     "react-dom": "^15.3.1",
     "react-fontawesome": "^1.2.0",
     "react-gravatar": "^2.4.5",
-    "react-modal": "^1.4.0",
+    "react-modal": "^1.2.1",
     "react-redux": "^4.4.5",
     "react-router": "^2.8.1",
     "react-router-redux": "^4.0.5",

src/js/components/app.tsx

@@ -33,7 +33,7 @@ class App extends React.Component<PassedProps & GeneratedDispatchProps, any> {
     const { children } = this.props;
 
     return (
-      <div className={classNames(styles.app)}>
+      <div id="minard-app" className={classNames(styles.app)}>
         <Header />
         <SubHeader />
         {children}

src/js/components/common/forms/modal-dialog.scss

@@ -16,8 +16,8 @@
 }
 
 .overlay {
-  position: fixed;
-  overflow-y: auto;
+  position: absolute;
+  z-index: 99;
   top: 0;
   left: 0;
   width: 100%;

src/js/components/project-view/project-settings-dialog.tsx

@@ -51,6 +51,12 @@ class ProjectSettingsDialog extends React.Component<Props, any> {
     this.clearAndClose = this.clearAndClose.bind(this);
   }
 
+  public componentWillMount() {
+    // We need to mount the modal onto our App component so that
+    // the overlay covers the whole app
+    (ModalDialog as any).setAppElement('#minard-app');
+  }
+
   private deleteProject() {
     const { project, deleteProject, router } = this.props;
 

src/js/components/team-projects-view/new-project-dialog.tsx

@@ -45,6 +45,12 @@ class NewProjectDialog extends React.Component<Props, any> {
     this.onSuccessfulCreation = this.onSuccessfulCreation.bind(this);
   }
 
+  public componentWillMount() {
+    // We need to mount the modal onto our App component so that
+    // the overlay covers the whole app
+    (ModalDialog as any).setAppElement('#minard-app');
+  }
+
   private onSuccessfulCreation(projectId: string) {
     this.props.closeDialog();
     this.props.router.push(`/project/${projectId}`);