Proposal Editor Responsiveness Fix

Author: lazycipher

src/user/proposals/ProposalEditor/EditorContent/EditorContent.scss

@@ -1,7 +1,7 @@
 .editor-content {
   padding: 30px;
   display: flex;
-  height: 100vh;
+  height: 100%;
   flex-direction: column;
   .editor-toppanel {
     flex-grow: 1;
@@ -90,3 +90,24 @@
     }
   }
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .editor-content {
+    padding: 0;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    .editor-toppanel {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      .editor-title {
+        width: 100%;
+      }
+      .editor-buttons {
+        // text-align: center;
+        margin: 20px auto;
+      }
+    }
+  }
+}

src/user/proposals/ProposalEditor/ProposalEditor.js

@@ -10,14 +10,14 @@ class ProposalEditor extends Component {
   }
   render() {
     return (
-      <div className="editor">
-        <div className="editor__navigation">
-          <Navigation dashboard={this.state.dashboard} />
+      <>
+        <Navigation dashboard={this.state.dashboard} />
+        <div className="editor">
+          <div className="editor__content">
+            <EditorContent />
+          </div>
         </div>
-        <div className="editor__content">
-          <EditorContent />
-        </div>
-      </div>
+      </>
     );
   }
 }

src/user/proposals/ProposalEditor/ProposalEditor.scss

@@ -3,6 +3,7 @@
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
+  margin-left: 13%;
   .editor__navigation {
     flex: 1;
     border-right: solid 1px #dfe9f1;
@@ -11,3 +12,15 @@
     flex: 5.5;
   }
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .editor {
+    padding: 2vh 2.5vw;
+    width: 100%;
+    margin-left: 0;
+    .editor__content {
+      padding: 0;
+      width: 100%;
+    }
+  }
+}