Fix scrolling (#208)

* Improve real-estate * Fix z-index for content container * Fix styling /w @Lucretius help * Fix right border with overflow enabled * Reduce right margin
djenriquez · Oct 3, 2017 · b44abe0 · b44abe0
1 parent 03bc1b8
commit b44abe0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/app/components/App/App.jsx b/app/components/App/App.jsx
@@ -273,24 +273,26 @@ export default class App extends React.Component {
                 </Tabs>
             </div>
         );
-        return <div>
-            <Snackbar
-                className={styles.snackbar}
-                bodyStyle={this.state.snackbarStyle}
-                open={this.state.snackbarMessage != ''}
-                message={this.state.snackbarMessage}
-                autoHideDuration={3000}
-                onRequestClose={() => this.setState({ snackbarMessage: '' })}
-                onActionTouchTap={() => this.setState({ snackbarMessage: '' })}
-            />
-            {this.state.logoutOpen && this.renderSessionExpDialog()}
-            <Header tokenIdentity={this.state.identity} />
-            <Menu pathname={this.props.location.pathname} />
-            <div id={styles.content}>
-                <Paper zDepth={1}>
-                    {this.props.children || welcome}
-                </Paper>
+        return (
+            <div>
+                <Snackbar
+                    className={styles.snackbar}
+                    bodyStyle={this.state.snackbarStyle}
+                    open={this.state.snackbarMessage != ''}
+                    message={this.state.snackbarMessage}
+                    autoHideDuration={3000}
+                    onRequestClose={() => this.setState({ snackbarMessage: '' })}
+                    onActionTouchTap={() => this.setState({ snackbarMessage: '' })}
+                />
+                {this.state.logoutOpen && this.renderSessionExpDialog()}
+                <Header tokenIdentity={this.state.identity} />
+                <Menu pathname={this.props.location.pathname} />
+                <div id={styles.content}>
+                    <Paper zDepth={1} style={{ 'border-right-style': 'inset' }}>
+                        {this.props.children || welcome}
+                    </Paper>
+                </div>
             </div>
-        </div>
+        )
     }
 }
diff --git a/app/components/App/app.css b/app/components/App/app.css
@@ -1,9 +1,11 @@
 #content {
     padding-left: 30px;
-    width: calc(100vw - 275px);
-    display: inline-block;
+    width: calc(100vw - 270px);
     margin-left: 235px;
     margin-top: 70px;
+    height: calc(100% - 70px);
+    overflow-y: scroll;
+    position: fixed;
 }
 
 .snackbar {