Better trigger alignment without reactions

app/assets/stylesheets/comments.css

@@ -37,8 +37,6 @@
   }
 
   .comment__author {
-    margin-inline-end: calc(var(--comment-padding-inline) * -0.66);
-
     .btn {
       font-weight: inherit;
     }
@@ -54,6 +52,7 @@
   }
 
   .comment__body {
+    padding-inline-end: var(--reaction-size);
     text-align: start;
 
     :first-child {
@@ -75,7 +74,7 @@
     border-radius: 0.2em;
     padding:
       var(--comment-padding-block)
-      var(--comment-padding-inline)
+      calc(var(--comment-padding-inline) / 2)
       calc(var(--comment-padding-block) * 1.5)
       var(--comment-padding-inline);
     word-wrap: break-word;

app/assets/stylesheets/reactions.css

@@ -19,14 +19,22 @@
 
     &:not(:has(.reaction)) {
       inline-size: auto;
+      inset-block-end: var(--comment-padding-block);
+      inset-inline-end: calc(var(--comment-padding-inline) / 2);
       margin: 0;
-      inset: auto 0 var(--comment-padding-block) auto;
       position: absolute;
-      translate: 50%;
 
       .reactions__list {
         display: none;
       }
+
+      .reactions__trigger {
+        background-color: var(--color-ink-lightest);
+
+        &:not(:hover) {
+          opacity: 0.66;
+        }
+      }
     }
   }
 

app/views/cards/comments/reactions/_reactions.html.erb

@@ -6,7 +6,7 @@
 
     <%= turbo_frame_tag comment, :new_reaction do %>
       <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
-            class: "btn btn--circle", action: "soft-keyboard#open",
+            class: "reactions__trigger btn btn--circle borderless", action: "soft-keyboard#open",
             data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %>
         <%= icon_tag "reaction" %>
         <span class="for-screen-reader">Add your own reaction</span>