Fix styling of InstructionsEditor

Author: greenberga

src/components/InstructionsEditor.jsx

@@ -39,8 +39,9 @@ export default class InstructionsEditor extends React.Component {
             {t('workspace.components.instructions.cancel')}
           </button>
         </div>
-        <div className="instructions-editor__input">
+        <div className="instructions-editor__input-container">
           <textarea
+            className="instructions-editor__input"
             defaultValue={this.props.instructions}
             ref={this._ref}
           />

src/css/application.css

@@ -361,25 +361,27 @@ body {
   background-color: var(--color-low-contrast-gray);
 }
 
-.instructions-editor__input {
-  padding: 1rem 1rem 0;
+.instructions-editor__input-container {
+  position: relative;
+  width: 100%;
   flex-grow: 1;
   overflow-y: scroll;
+}
 
-  /* postcss-bem-linter: ignore */
-  & textarea {
-    height: 100%;
-    width: 100%;
-    padding: 0.5rem;
-    box-sizing: border-box;
-    font-family: monospace;
-    font-size: 1rem;
-    border: 0;
-    outline: 0;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    resize: none;
-  }
+.instructions-editor__input {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  font-size: 1rem;
+  border: 0;
+  outline: 0;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  resize: none;
 }
 
 .instructions-editor__menu {
@@ -389,9 +391,8 @@ body {
 }
 
 .instructions-editor__footer {
-  margin: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--color-light-gray);
+  margin: 0.5rem;
+  font-size: 0.875rem;
 }
 
 .instructions-editor__menu-button:not(:last-child) {