Add scroll bars

components/app-header/app-header-component.jsx

@@ -47,7 +47,7 @@ class AppHeaderComponent extends PureComponent {
   render() {
     const { classes, isUserLogged, useMobileView } = this.props;
     return (
-      <AppBar position="static">
+      <AppBar position="relative">
         <Toolbar classes={{ root: classes.toolbarRoot }}>
           {useMobileView && <HeaderMenuButtonMobile />}
           {!useMobileView && <HeaderMenuButton />}

components/articles/articles-component.jsx

 import Divider from "@material-ui/core/Divider";
 import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { Fragment } from "react";
 
 import {
   BaseInputOutput,
@@ -22,13 +21,6 @@ import BoutonSupprimerTranche from "./article-tranches/bouton-supprimer-tranche"
 import styles2 from "./articles-component.module.scss";
 
 const stylesTheme = theme => ({
-  paper: {
-    margin: "1em",
-    padding: "0 0 10px 0",
-    [theme.breakpoints.down("xs")]: {
-      margin: "0em",
-    },
-  },
   titleArticleCGI: {
     color: "#6C6C6C",
     fontFamily: "Lora",
@@ -216,7 +208,7 @@ class ArticlesComponent extends React.Component {
     const articleTranches = fillArrayWith(count, this.gimmeIRPartsOfArticle);
 
     return (
-      <Paper className={classes.paper}>
+      <Fragment>
         <ArticleHeader
           montrerPLF={!!reformePLF}
           resetVarArticle={handleResetVarArticle}
@@ -254,7 +246,7 @@ class ArticlesComponent extends React.Component {
             onInputChange={handleArticleChange}
           />
         </div>
-      </Paper>
+      </Fragment>
     );
   }
 }

components/reformeur/reformeur-component.jsx

 import AppBar from "@material-ui/core/AppBar";
+import Paper from "@material-ui/core/Paper";
 import Tab from "@material-ui/core/Tab";
 import Tabs from "@material-ui/core/Tabs";
 import PropTypes from "prop-types";
-import { Fragment, PureComponent } from "react";
+import { PureComponent } from "react";
 import SwipeableViews from "react-swipeable-views";
 
 import Articles from "../articles";
 import ImpactCards from "../cartes-impact";
 import SimulationMenuBar from "../simulation-menu";
+import styles from "./reformeur-component.module.scss";
 
 class ReformeurComponent extends PureComponent {
   constructor(props) {
@@ -25,11 +27,11 @@ class ReformeurComponent extends PureComponent {
   };
 
   renderDesktopView = () => (
-    <div className="clearfix">
-      <div className="moitie-gauche">
+    <div className={styles.container}>
+      <Paper square className={styles.parameters}>
         <Articles />
-      </div>
-      <div className="moitie-droite">
+      </Paper>
+      <div className={styles.results}>
         <SimulationMenuBar />
         <ImpactCards />
       </div>
@@ -39,7 +41,7 @@ class ReformeurComponent extends PureComponent {
   renderMobileView = () => {
     const { indextab } = this.state;
     return (
-      <Fragment>
+      <div>
         <AppBar color="default" position="static">
           <Tabs
             indicatorColor="primary"
@@ -56,25 +58,25 @@ class ReformeurComponent extends PureComponent {
           index={indextab}
           onChangeIndex={this.handleOnChangeIndex}>
           <div style={{ padding: 24 }}>
+            <Paper>
               <Articles />
+            </Paper>
           </div>
           <div style={{ padding: 24 }}>
             <SimulationMenuBar />
             <ImpactCards />
           </div>
         </SwipeableViews>
-      </Fragment>
+      </div>
     );
   };
 
   render() {
     const { useMobileView } = this.props;
-    return (
-      <div className="main-index">
-        {useMobileView && this.renderMobileView()}
-        {!useMobileView && this.renderDesktopView()}
-      </div>
-    );
+    if (useMobileView) {
+      return this.renderMobileView();
+    }
+    return this.renderDesktopView();
   }
 }
 

components/reformeur/reformeur-component.module.scss

+.container {
+  display: flex;
+  flex-direction: row;
+  height: calc(100% - 64px);
+}
+
+.parameters {
+  height: 100%;
+  overflow-y: scroll;
+  margin-left: 1em;
+  width: 600px;
+}
+
+.results {
+  height: 100%;
+  overflow-y: scroll;
+  flex: 1;
+  padding: 1em;
+}

components/simulation-menu/simulation-menubar-component.jsx

@@ -11,7 +11,7 @@ import SimulationButton60 from "./simulation-button-60";
 
 const styles = () => ({
   container: {
-    margin: "15px 0",
+    marginBottom: "15px",
   },
   marginIcon: {
     marginRight: "15px",

pages/index.jsx

 import "../styles/index.scss";
 
-import { withStyles } from "@material-ui/core/styles/";
 import { flow } from "lodash";
 import Head from "next/head";
 import { withRouter } from "next/router";
@@ -10,8 +9,7 @@ import AppHeader from "../components/app-header";
 import PopinManager from "../components/PopinManager";
 import Reformeur from "../components/reformeur";
 import withRoot from "../lib/withRoot";
-
-const styles = () => ({});
+import styles from "./index.module.scss";
 
 class IndexPage extends PureComponent {
   render() {
@@ -20,8 +18,10 @@ class IndexPage extends PureComponent {
         <Head>
           <title>LexImpact</title>
         </Head>
+        <div className={styles.container}>
           <AppHeader />
           <Reformeur />
+        </div>
         <PopinManager />
       </Fragment>
     );
@@ -29,7 +29,6 @@ class IndexPage extends PureComponent {
 }
 
 export default flow(
-  withStyles(styles),
   withRouter,
   withRoot,
 )(IndexPage);

pages/index.module.scss

+.container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file

styles/index.scss

@@ -8,11 +8,6 @@
     font-family: "Lato";
   }
 
-  .main-index {
-    background-image: url(../static/images/tramebackground.png);
-    width: auto;
-  }
-
   html {
     background-image: url(../static/images/tramebackground.png);
   }
@@ -23,27 +18,6 @@
     margin: 0;
   }
 
-  @media screen and (min-width: 500px) {
-    .moitie-gauche {
-      box-sizing: border-box;
-      position: absolute;
-      width: 600px;
-      float: left;
-    }
-
-    .moitie-droite {
-      box-sizing: border-box;
-      margin-left: 620px;
-      margin-right: 32px;
-      margin-top: 1em;
-      float: left;
-    }
-  }
-
-  .clearfix {
-    clear: both;
-  }
-
   .heading {
     display: flex;
     justify-content: center;