Fix scrollbar issues (#160)

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;

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;
 }

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 {