From 2c72ea04bb46a787ca1dd26547eb695fdff49004 Mon Sep 17 00:00:00 2001
From: Minh Duc Vo <minhducsun2002@gmail.com>
Date: Mon, 25 Mar 2019 13:32:06 +0700
Subject: [PATCH] ProblemTabEditor : no scrolling if mounted

---
 public/index.html                            |  2 +-
 src/app/problemList/codeEditor/codeBox.js    | 10 +++++-----
 src/app/problemList/codeEditor/codeEditor.js |  2 ++
 src/app/problemList/problemTabEditor.js      | 10 +++++++++-
 src/index.js                                 |  2 +-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7e22a02..af67ca8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,7 +25,7 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100%"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/app/problemList/codeEditor/codeBox.js b/src/app/problemList/codeEditor/codeBox.js
index 25393af..f2c4b34 100644
--- a/src/app/problemList/codeEditor/codeBox.js
+++ b/src/app/problemList/codeEditor/codeBox.js
@@ -42,7 +42,7 @@ class CodeBox extends React.PureComponent {
     }
     render() {
         return (
-            <div style={{ flexGrow: 1 }}>
+            <>
                 <Divider light variant="inset" />
                 <AppBar position="static" color="default" elevation={0}>
                     <div id="optionTab" style={{ margin: '1% 1%' }}>
@@ -78,9 +78,10 @@ class CodeBox extends React.PureComponent {
                             </Grid>
                         </Grid>
                     </div>
+                </AppBar>
                 <div style={(
                     this.state.submitting ? 
-                    { opacity: 0.4, pointerEvents: 'none' } : {}
+                    { opacity: 0.4, pointerEvents: 'none', height: '100%' } : { height: '100%' }
                 )}>
                         <CodeEditor
                             readOnly={this.state.submitting}
@@ -88,9 +89,8 @@ class CodeBox extends React.PureComponent {
                             update={this.handleUpdate}
                             code={this.state.code}
                         />
-                    </div>
-                </AppBar>
-            </div>
+                </div>
+            </>
         )
     }
 }
diff --git a/src/app/problemList/codeEditor/codeEditor.js b/src/app/problemList/codeEditor/codeEditor.js
index 227c6cd..387e762 100644
--- a/src/app/problemList/codeEditor/codeEditor.js
+++ b/src/app/problemList/codeEditor/codeEditor.js
@@ -177,6 +177,8 @@ class CodeEditor extends React.PureComponent {
                 value={this.props.code}
                 onChange={this.props.update}
                 width="100%"
+                height={`${window.innerHeight * 2}px`}
+                // set height to overwhelming large, so no problems even if screens get big
                 readOnly={this.props.readOnly}
             />
         );
diff --git a/src/app/problemList/problemTabEditor.js b/src/app/problemList/problemTabEditor.js
index 29a27bb..b4fddd9 100644
--- a/src/app/problemList/problemTabEditor.js
+++ b/src/app/problemList/problemTabEditor.js
@@ -20,6 +20,14 @@ class ProblemTabEditor extends React.Component {
         this.handleTabChange = this.handleTabChange.bind(this)
     }
 
+    componentDidMount() {
+        document.querySelector('body').style.overflowY = 'hidden';
+    }
+            
+    componentWillUnmount() {
+        document.querySelector('body').style.overflowY = 'auto';
+    }
+
     handleTabChange(value) {
         this.setState({
             currentTab: value,
@@ -27,7 +35,7 @@ class ProblemTabEditor extends React.Component {
     }
     render() {
         return (
-            <div>
+            <div style={{ height: '100%' }}>
                 <ProblemTab
                     problems={this.props.problems}
                     handleTabChange={this.handleTabChange}
diff --git a/src/index.js b/src/index.js
index 5ddb234..f18fe31 100644
--- a/src/index.js
+++ b/src/index.js
@@ -84,7 +84,7 @@ class Hestia extends React.Component {
                     menuOpen={toggleSidenav}
                 />
                 <Router>
-                    <div>
+                    <div style={{ height: '75%' }}>
                         <Sidenav
                             pages={[
                                 {