Add a Markdown blurb footer thingy

Author: greenberga

src/components/Instructions.jsx

@@ -19,18 +19,18 @@ export default function Instructions({
     <div
       className="layout__instructions"
     >
-      <div className="instructions">
-        {
-          isEditing ?
-            <InstructionsEditor
-              instructions={instructions}
-              projectKey={projectKey}
-              onCancelEditing={onCancelEditing}
-              onSaveChanges={onSaveChanges}
-            /> :
-            markdownToReact(instructions)
-        }
-      </div>
+      {
+        isEditing ?
+          <InstructionsEditor
+            instructions={instructions}
+            projectKey={projectKey}
+            onCancelEditing={onCancelEditing}
+            onSaveChanges={onSaveChanges}
+          /> :
+          <div className="instructions">
+            {markdownToReact(instructions)}
+          </div>
+      }
     </div>
   );
 }

src/components/InstructionsEditor.jsx

@@ -39,11 +39,15 @@ export default class InstructionsEditor extends React.Component {
             {t('workspace.components.instructions.cancel')}
           </button>
         </div>
-        <textarea
-          className="instructions-editor__input"
-          defaultValue={this.props.instructions}
-          ref={this._ref}
-        />
+        <div className="instructions-editor__input">
+          <textarea
+            defaultValue={this.props.instructions}
+            ref={this._ref}
+          />
+        </div>
+        <div className="instructions-editor__footer">
+          Styling with Markdown is supported
+        </div>
       </div>
     );
   }

src/css/application.css

@@ -352,34 +352,45 @@ body {
 /** @define instructions-editor */
 
 .instructions-editor {
-  height: calc(100% - var(--size-instructions-menu-padding) - 1rem);
-  padding-top: var(--size-instructions-menu-padding);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--color-low-contrast-gray);
 }
 
 .instructions-editor__input {
-  width: 100%;
-  height: calc(100% - 1rem);
-  margin: 0;
-  font-family: monospace;
-  font-size: 1rem;
-  background-color: transparent;
-  border: 0;
-  outline: 0;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  resize: none;
+  padding: 1rem 1rem 0;
+  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__menu {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
   padding: 0.5rem;
   text-align: right;
   background-color: var(--color-light-gray);
 }
 
+.instructions-editor__footer {
+  margin: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-light-gray);
+}
+
 .instructions-editor__menu-button:not(:last-child) {
   margin-right: 0.5em;
 }