Improve comment form design

app/assets/stylesheets/comments.css

@@ -15,10 +15,6 @@
   max-inline-size: 66ch;
   margin-block: var(--comment-padding-block);
   margin-inline: 0 auto;
-
-  textarea {
-    padding: var(--comment-padding-block) var(--comment-padding-inline);
-  }
 }
 
 .comment__avatar {
@@ -57,6 +53,22 @@
   }
 }
 
+.comment__input {
+  --input-border-color: var(--color-subtle);
+
+  line-height: inherit;
+  min-block-size: calc(4lh + (2 * var(--comment-padding-block)));
+  min-inline-size: 100%;
+  padding-block: var(--comment-padding-block);
+  padding-inline: calc(var(--comment-padding-inline) + calc((1lh - 1ex) / 2));
+
+  @supports (field-sizing: content) {
+    field-sizing: content;
+    max-block-size: calc(5lh + (2 * var(--comment-padding-block)));
+    min-block-size: calc(3lh + (2 * var(--comment-padding-block)));
+  }
+}
+
 .comment--mine {
   flex-direction: row-reverse;
   margin-inline: auto 0;
@@ -64,17 +76,11 @@
   .comment__author {
     flex-direction: row-reverse;
   }
+}
 
-  .input {
-    &::placeholder {
-      color: var(--color-ink);
-      opacity: 0.5;
-    }
-
-    &::selection {
-      background-color: var(--color-selected-dark);
-    }
-  }
+.comment__submit {
+  position: absolute;
+  inset: auto 0.5em 0.5em auto;
 }
 
 .comment__timestamp {
@@ -86,6 +92,5 @@
   color: var(--bubble-color);
   font-weight: 600;
   gap: 0.5ch;
-  /* margin-block: calc(var(--comment-padding-block) * -1); */
   padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
 }

app/views/comments/_new.html.erb

@@ -1,14 +1,9 @@
-<div class="comment flex align-start full-width comment--mine">
-  <figure class="comment__avatar avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></figure>
-
-  <div class="comment__content flex flex-column full-width">
-    <div class="comment__author flex align-center gap-half">
-      <strong><%= Current.user.name %></strong>
-    </div>
-    <div class="comment__body txt-align-start margin-block-start-half">
+<div class="comment flex align-start full-width comment--mine margin-block-end-double">
+  <div class="flex flex-column full-width">
+    <div class="position-relative">
       <%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width", data: { controller: "form", action: "keydown.meta+enter->form#submit" } do |form| %>
-        <%= form.text_area :body, class: "input border border-radius", required: true, rows: 4, placeholder: new_comment_placeholder(bubble) %>
-        <%= form.button class: "btn btn--reversed center" do %>
+        <%= form.text_area :body, class: "input comment__input", required: true, rows: 3, placeholder: new_comment_placeholder(bubble) %>
+        <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-end txt-small" do %>
           <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
           <span class="for-screen-reader">Save</span>
         <% end %>