From ce4899d089f8a25b2601364cc8d16c5c6753538b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 27 Oct 2025 15:05:40 -0500
Subject: [PATCH] Better trigger alignment without reactions

---
 app/assets/stylesheets/comments.css                  |  5 ++---
 app/assets/stylesheets/reactions.css                 | 12 ++++++++++--
 .../cards/comments/reactions/_reactions.html.erb     |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 3cc14eebb..33aacc74a 100644
--- a/app/assets/stylesheets/comments.css
+++ b/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;
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 85d116f4e..3cecf8bd1 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/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;
+        }
+      }
     }
   }
 
diff --git a/app/views/cards/comments/reactions/_reactions.html.erb b/app/views/cards/comments/reactions/_reactions.html.erb
index 8e63e678f..dde2d18fd 100644
--- a/app/views/cards/comments/reactions/_reactions.html.erb
+++ b/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>