Add ConsoleInput adjustment to font size

Author: catarak

client/modules/IDE/components/Console.jsx

@@ -147,6 +147,7 @@ const Console = ({ t }) => {
           <ConsoleInput
             theme={theme}
             dispatchConsoleEvent={dispatchConsoleEvent}
+            fontSize={fontSize}
           />
         }
       </div>

client/modules/IDE/components/ConsoleInput.jsx

@@ -55,10 +55,14 @@ class ConsoleInput extends React.Component {
 
       return null;
     });
+
+    this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
   }
 
   componentDidUpdate(prevProps) {
     this._cm.setOption('theme', `p5-${this.props.theme}`);
+    this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
+    this._cm.refresh();
   }
 
   componentWillUnmount() {
@@ -72,7 +76,14 @@ class ConsoleInput extends React.Component {
       <div
         className="console__input"
       >
-        <RightArrowIcon className="console-active__arrow" focusable="false" aria-hidden="true" />
+        <div className="console-active__arrow-container">
+          <RightArrowIcon
+            className="console-active__arrow"
+            focusable="false"
+            aria-hidden="true"
+            style={{ width: `${this.props.fontSize}px` }}
+          />
+        </div>
         <div ref={(element) => { this.codemirrorContainer = element; }} className="console__editor" />
       </div>
     );
@@ -81,7 +92,8 @@ class ConsoleInput extends React.Component {
 
 ConsoleInput.propTypes = {
   theme: PropTypes.string.isRequired,
-  dispatchConsoleEvent: PropTypes.func.isRequired
+  dispatchConsoleEvent: PropTypes.func.isRequired,
+  fontSize: PropTypes.number.isRequired
 };
 
 

client/styles/components/_console-input.scss

@@ -1,33 +1,39 @@
 .console__input {
-  padding-left: #{20 / $base-font-size}rem;
-  position: absolute;
-  bottom: 0;
-  height: #{22 / $base-font-size}rem;
   width: 100%;
+  display: flex;
+  align-items: center;
   @include themify() {
     background-color: getThemifyVariable('console-input-background-color');
   }
 }
 
 .console__input .console-active__arrow {
-  left: #{10 / $base-font-size}rem;
-  position: absolute;
-  top: #{4 / $base-font-size}rem;
-  & svg {
-    width: #{6 / $base-font-size}rem;
-    height: #{10 / $base-font-size}rem;
-  }
+  width: auto;
+  height: 55%;
   & g {
     @include themify() {
       fill: getThemifyVariable('console-active-arrow-color');  
     }
   }
 }
 
+.console-active__arrow-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: #{10 / $base-font-size}rem;
+}
+
 .console__editor {
-  margin-left: #{8 / $base-font-size}rem;
-  height: #{20 / $base-font-size}rem;
-  line-height: #{20 / $base-font-size}rem;
+  margin-left: #{15 / $base-font-size}rem;
+  flex: 1;
+  & .CodeMirror {
+    height: auto;
+  }
+  & .CodeMirror-lines {
+    padding-top: #{2 / $base-font-size}rem;
+  }
 }
 
 .console__editor .CodeMirror {

client/styles/components/_console.scss

@@ -8,7 +8,6 @@
 	width: 100%;
 	height: 100%;
 	z-index: 1000;
-	overflow: hidden;
 	display: flex;
 	flex-direction: column;
 
@@ -41,9 +40,9 @@
 
 .preview-console__messages {
 	display: flex;
+	flex: 1;
 	flex-direction: column;
 	overflow-y: scroll;
-	margin-bottom: #{25 / $base-font-size}rem;
 }
 
 .preview-console__collapse {
@@ -132,7 +131,7 @@
 
 .preview-console__body {
 	display: flex;
-	flex-direction: column-reverse;
+	flex-direction: column;
 	height: calc(100% - #{30 / $base-font-size}rem);
 
 	.preview-console__message {