Fix text box resizing (#750)

Closes #416
Closes #475
Closes #525

assets/styles/components.scss

@@ -752,6 +752,17 @@ tr.button-transparent {
   }
 }
 
+.resizable-textarea-wrapper {
+  display: block;
+
+  textarea {
+    border-radius: var(--size-rounded-sm);
+    min-height: 10rem;
+    width: calc(100% - var(--spacing-card-lg) - var(--spacing-card-sm));
+    resize: vertical;
+  }
+}
+
 .error {
   display: flex;
   flex-direction: column;

pages/_type/_id/edit.vue

@@ -302,28 +302,26 @@
         class="separator"
         :items="['source', 'preview']"
       />
-      <div class="edit-wrapper">
-        <div v-if="bodyViewMode === 'source'" class="textarea-wrapper">
-          <textarea
-            id="body"
-            v-model="newProject.body"
-            :class="{
-              'known-error': newProject.body === '' && showKnownErrors,
-            }"
-            :disabled="(currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
-          />
-        </div>
-        <div
-          v-if="bodyViewMode === 'preview'"
-          v-highlightjs
-          class="markdown-body"
-          v-html="
-            newProject.body
-              ? $xss($md.render(newProject.body))
-              : 'No body specified.'
-          "
-        ></div>
+      <div v-if="bodyViewMode === 'source'" class="resizable-textarea-wrapper">
+        <textarea
+          id="body"
+          v-model="newProject.body"
+          :class="{
+            'known-error': newProject.body === '' && showKnownErrors,
+          }"
+          :disabled="(currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
+        />
       </div>
+      <div
+        v-if="bodyViewMode === 'preview'"
+        v-highlightjs
+        class="markdown-body"
+        v-html="
+          newProject.body
+            ? $xss($md.render(newProject.body))
+            : 'No body specified.'
+        "
+      ></div>
     </section>
     <section class="card extra-links">
       <div class="title">
@@ -812,17 +810,8 @@ label {
   }
 }
 
-.textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  textarea {
-    flex: 1;
-    overflow-y: auto;
-    resize: none;
-    max-width: 100%;
-  }
+.resizable-textarea-wrapper textarea {
+  min-height: 20rem;
 }
 
 .page-contents {
@@ -908,11 +897,6 @@ section.description {
     margin: var(--spacing-card-sm) 0;
   }
 
-  .edit-wrapper * {
-    min-height: 10rem;
-    max-height: 40rem;
-  }
-
   .markdown-body {
     overflow-y: auto;
     padding: 0 var(--spacing-card-sm);

pages/_type/_id/gallery.vue

@@ -222,7 +222,7 @@
               type="text"
               placeholder="Enter the title..."
             />
-            <div class="textarea-wrapper">
+            <div class="resizable-textarea-wrapper">
               <textarea
                 id="body"
                 v-model="item.description"
@@ -652,10 +652,6 @@ export default {
       border-radius: var(--size-rounded-sm);
     }
 
-    .textarea-wrapper {
-      width: 100%;
-    }
-
     input {
       width: 100%;
       margin: 0 0 0.25rem;

pages/_type/_id/version.vue

@@ -175,13 +175,11 @@
             class="separator"
             :items="['source', 'preview']"
           />
-          <div v-if="changelogViewMode === 'source'" class="textarea-wrapper">
-            <textarea
-              id="body"
-              v-model="version.changelog"
-              class="changelog-textarea"
-              spellcheck="true"
-            />
+          <div
+            v-if="changelogViewMode === 'source'"
+            class="resizable-textarea-wrapper"
+          >
+            <textarea id="body" v-model="version.changelog" spellcheck="true" />
           </div>
           <div
             v-if="changelogViewMode === 'preview'"
@@ -1304,18 +1302,6 @@ section {
   margin-bottom: var(--spacing-card-sm);
 }
 
-.textarea-wrapper {
-  display: inline-block;
-  width: 100%;
-}
-
-.changelog-textarea {
-  resize: vertical;
-  width: calc(100% - var(--spacing-card-lg) - var(--spacing-card-md));
-  min-height: 10rem;
-  display: block;
-}
-
 .full-width-input {
   width: 100%;
   margin-bottom: 0.5rem;