From 36d6facd8dd4d4dd5831eca0ac2d2a2dce153cff Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 7 Jan 2025 16:06:47 +0100
Subject: [PATCH] fix: comment edit ctas style + dynamic textarea rows

Ref #88
---
 src/components/comments/Comment.vue  | 19 +++++++++++++++++--
 src/components/comments/Comments.vue |  6 ++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
index 6b83e23..ddeb9a7 100644
--- a/src/components/comments/Comment.vue
+++ b/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>
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 4af34b1..8eb97e5 100644
--- a/src/components/comments/Comments.vue
+++ b/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;
 }