Needs a little structure

app/assets/stylesheets/comments.css

@@ -1,9 +1,9 @@
 .comments {
   --avatar-size: 2.33em;
-  --comment-padding-block: 1lh;
+  --comment-padding-block: 0.65lh;
   --comment-padding-inline: 2ch;
 
-  max-inline-size: 80ch;
+  max-inline-size: 120ch;
   row-gap: var(--comment-padding-block);
 
   > :first-child {
@@ -11,6 +11,16 @@
   }
 }
 
+.comment {
+  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 {
   margin-block-start: calc(var(--comment-padding-block) * 0.5);
   margin-inline: auto calc(var(--comment-padding-inline) * -0.75);
@@ -35,11 +45,11 @@
 }
 
 .comment__content {
-  margin-inline: 0 var(--avatar-size);
+  margin-inline: auto var(--avatar-size);
   padding: var(--comment-padding-block) var(--comment-padding-inline);
 
   .comment--mine & {
-    margin-inline: var(--avatar-size) 0;
+    margin-inline: var(--avatar-size) auto;
   }
 
   .comment:has(+ .event-summary) & {
@@ -49,6 +59,7 @@
 
 .comment--mine {
   flex-direction: row-reverse;
+  margin-inline: auto 0;
 
   .comment__author {
     flex-direction: row-reverse;
@@ -72,8 +83,9 @@
 }
 
 .event-summary {
+  color: var(--bubble-color);
   font-weight: 600;
   gap: 0.5ch;
-  margin-block: calc(var(--comment-padding-block) * -1);
+  /* margin-block: calc(var(--comment-padding-block) * -1); */
   padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
 }

app/helpers/comments_helper.rb

@@ -1,6 +1,6 @@
 module CommentsHelper
   def comment_tag(comment, &)
-    tag.div id: dom_id(comment), class: "comment flex align-start full-width",
+    tag.div id: dom_id(comment), class: "comment flex-inline align-start full-width",
       data: { creator_id: comment.creator_id, created_by_current_user_target: "creation" }, &
   end
 

app/views/comments/_comment.html.erb

@@ -3,7 +3,7 @@
     <%= avatar_tag comment.creator, loading: :lazy %>
   </figure>
 
-  <div class="comment__content flex flex-column full-width">
+  <div class="comment__content flex-inline flex-column full-width border border-radius">
     <div class="comment__author flex align-center gap-half">
       <strong><%= comment.creator.name %></strong>
       <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>

app/views/comments/_new.html.erb

@@ -7,7 +7,7 @@
     </div>
     <div class="comment__body txt-align-start margin-block-start-half">
       <%= 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", required: true, rows: 4, placeholder: new_comment_placeholder(bubble) %>
+        <%= 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 %>
           <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
           <span class="for-screen-reader">Save</span>