Put the markdown preview on the side

public/style.css

@@ -7312,6 +7312,17 @@ article code {
 .flex-grow-1 {
   flex-grow: 1; }
 
+.flex-fair {
+  flex-basis: 1px;
+  flex-grow: 1;
+  flex-shrink: 1; }
+
+@media screen and (min-width: 30em) {
+  .flex-fair-ns {
+    flex-basis: 1px;
+    flex-grow: 1;
+    flex-shrink: 1; } }
+
 .b--theme {
   border-color: #666;
   border-color: var(--theme-color); }

src/rawdata/scss/_core.scss

@@ -180,6 +180,20 @@ article code {
   flex-grow: 1;
 }
 
+.flex-fair {
+  flex-basis: 1px;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+@media #{$breakpoint-not-small} {
+  .flex-fair-ns {
+    flex-basis: 1px;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}
+
 .b--theme {
   @include usevar(border-color, theme-color);
 }

src/templates/src/editor.html

@@ -9,11 +9,18 @@
     <script>
         const previewWorker = new Worker('{{ static "js/editorpreviews.js" }}');
     </script>
+
+    <style>
+        #editor {
+            resize: vertical;
+        }
+    </style>
 {{ end }}
 
 {{ define "content" }}
-<div class="content-block">
+<div class="content-block ph3 ph0-ns">
-    <form id="form" action="{{ .SubmitUrl }}" method="post">
+    <div class="flex flex-column flex-row-ns">
+        <form id="form" action="{{ .SubmitUrl }}" method="post" class="flex-fair-ns">
             {{ csrftoken .Session }}
 
             <input class="b w-100 mb1" name="title" type="text" placeholder="Post title..." value="{{ .PostTitle }}"/>
@@ -39,16 +46,12 @@
                 <input type="button" id="youtube" value="youtube" />
             </div>
             */}}
-        <textarea id="editor" class="w-100 minw-100 mw-100 h5 minh-5" name="body">{{ .PostBody }}</textarea>
+            <textarea id="editor" class="w-100 h5 minh-5" name="body">{{ .PostBody }}</textarea>
 
             <div class="flex flex-row-reverse justify-start mt2">
                 <input type="submit" class="button ml2" name="submit" value="{{ .SubmitLabel }}" />
             </div>
 
-        <div class="post post-preview mv3 mathjax">
-            <div id="preview" class="body contents"></div>
-        </div>
-
             {{ if .IsEditing }}
                 <span class="editreason">
                     <label for="editreason">Edit reason:</label>
@@ -95,6 +98,10 @@
             {% endif %}
             */}}
         </form>
+        <div class="post post-preview mv3 mathjax flex-fair-ns mv0-ns ml3-ns">
+            <div id="preview" class="body contents"></div>
+        </div>
+    </div>
 </div>
 
 <script>