From b5ff62e5f5e67e935ca6860ee1b8a11b12bac946 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Fri, 15 Jun 2018 12:41:32 +0700
Subject: [PATCH] Fix scrollbar issues (#160)

---
 .../learn/src/templates/Challenges/classic/Editor.js     | 7 ++++++-
 .../learn/src/templates/Challenges/classic/classic.css   | 9 ++++++++-
 .../learn/src/templates/Challenges/components/Output.js  | 8 +++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/learn/src/templates/Challenges/classic/Editor.js b/packages/learn/src/templates/Challenges/classic/Editor.js
index 3bc82ebdec..bb0e62da67 100644
--- a/packages/learn/src/templates/Challenges/classic/Editor.js
+++ b/packages/learn/src/templates/Challenges/classic/Editor.js
@@ -42,7 +42,12 @@ class Editor extends PureComponent {
         enabled: false
       },
       selectOnLineNumbers: true,
-      wordWrap: 'on'
+      wordWrap: 'on',
+      scrollbar: {
+        horizontal: 'hidden',
+        vertical: 'visible',
+        verticalHasArrows: true
+      }
     };
 
     this._editor = null;
diff --git a/packages/learn/src/templates/Challenges/classic/classic.css b/packages/learn/src/templates/Challenges/classic/classic.css
index 4d1ee4d5de..36d6642a80 100644
--- a/packages/learn/src/templates/Challenges/classic/classic.css
+++ b/packages/learn/src/templates/Challenges/classic/classic.css
@@ -1,9 +1,16 @@
+.reflex-element {
+  overflow: hidden !important;
+}
+
 .editor {
   height: 100%;
 }
 
 .instructions-panel {
   padding: 0 10px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .react-monaco-editor-container {
@@ -13,7 +20,7 @@
   align-items: end;
 }
 
-.monaco-menu .action-label { 
+.monaco-menu .action-label {
   color: #a2bd9b;
   letter-spacing: 0.02em;
 }
\ No newline at end of file
diff --git a/packages/learn/src/templates/Challenges/components/Output.js b/packages/learn/src/templates/Challenges/components/Output.js
index 61d6c90b28..1324850928 100644
--- a/packages/learn/src/templates/Challenges/components/Output.js
+++ b/packages/learn/src/templates/Challenges/components/Output.js
@@ -15,11 +15,13 @@ const options = {
     enabled: false
   },
   readOnly: true,
+  wordWrap: 'on',
+  scrollBeyondLastLine: false,
   scrollbar: {
-    vertical: 'hidden',
-    horizontal: 'hidden'
+    horizontal: 'hidden',
+    vertical: 'visible',
+    verticalHasArrows: true
   },
-  wordWrap: 'on'
 };
 
 class Output extends PureComponent {