fix: comment edit ctas style + dynamic textarea rows

Ref #88

src/components/comments/Comment.vue

@@ -25,7 +25,7 @@
       {{ comment.text }}
     </p>
 
-    <textarea v-else class="comment__body" v-model="draftText"></textarea>
+    <textarea v-else class="comment__body" v-model="draftText" :rows="Math.ceil(draftText.length / 32)"></textarea>
 
     <footer v-if="!isEditCommentMode" class="comment__replies">
       <p v-if="comment.replies?.length > 0">
@@ -54,7 +54,7 @@
       </div>
     </footer>
 
-    <footer v-else class="flex">
+    <footer v-else class="comment__edit-ctas">
       <input
         type="submit"
         class="btn btn--tranparent"
@@ -234,8 +234,23 @@ function cancelEditComment(event) {
 .comment__date {
   flex-shrink: 0;
 }
+.comment__body {
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0;
+  color: var(--color-grey-400);
+  font: inherit;
+  letter-spacing: inherit;
+}
 .comment__ctas > * {
   --border-color: transparent;
   margin-right: var(--space-4);
 }
+.comment__edit-ctas {
+  display: flex;
+  gap: var(--space-12);
+}
+.comment__edit-ctas > * {
+  flex-grow: 1;
+}
 </style>

src/components/comments/Comments.vue

@@ -387,15 +387,17 @@ function openComment(comment) {
   bottom: 5.5rem;
   background: #333;
 }
-#comments-container textarea {
+#comments-container textarea:not(.comment__body) {
   position: sticky;
   bottom: 0;
   margin: 0;
-  resize: none;
   background: none;
   padding: 0;
   color: var(--color-white);
 }
+#comments-container textarea {
+  resize: none;
+}
 #comments-container textarea:focus {
   outline: none;
 }