From 5180555e3070d31ae5b0abdefae2e7c0286eeb64 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 27 Oct 2025 14:49:20 -0500
Subject: [PATCH] Position the reaction button when empty

---
 app/assets/stylesheets/reactions.css          | 21 ++++++++++++-------
 .../comments/reactions/_reaction.html.erb     |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 96e9b49ba..85d116f4e 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -16,16 +16,24 @@
     &:has([open]) {
       z-index: var(--z-popup);
     }
+
+    &:not(:has(.reaction)) {
+      inline-size: auto;
+      margin: 0;
+      inset: auto 0 var(--comment-padding-block) auto;
+      position: absolute;
+      translate: 50%;
+
+      .reactions__list {
+        display: none;
+      }
+    }
   }
 
   .reactions__list {
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--column-gap);
-
-    &:not(:has(.reaction)) {
-      display: none;
-    }
   }
 
   /* Single reaction
@@ -58,7 +66,7 @@
     cursor: pointer;
 
     @media (any-hover: hover) {
-      &:not(:active):hover {
+      &:not(.expanded):hover {
         filter: brightness(var(--reaction-hover-brightness));
 
         @media (prefers-color-scheme: dark) {
@@ -77,7 +85,6 @@
 
   .reaction__delete {
     display: none;
-    translate: 0.25em;
 
     .expanded & {
       display: grid;
@@ -95,7 +102,7 @@
 
     &:has(.input:focus) {
       outline: var(--focus-ring-size) solid var(--focus-ring-color);
-      outline-offset: var(--focus-ring-offset);
+      outline-offset: -1px;
     }
 
     .reaction__form-label:focus {
diff --git a/app/views/cards/comments/reactions/_reaction.html.erb b/app/views/cards/comments/reactions/_reaction.html.erb
index 621b8406a..2c9dfc01b 100644
--- a/app/views/cards/comments/reactions/_reaction.html.erb
+++ b/app/views/cards/comments/reactions/_reaction.html.erb
@@ -19,7 +19,7 @@
         method: :delete,
         class: "reaction__delete btn btn--negative flex-item-justify-end",
         data: { action: "reaction-delete#perform", reaction_delete_target: "button" } do %>
-    <%= icon_tag "minus" %>
+    <%= icon_tag "trash" %>
     <span class="for-screen-reader">Delete this reaction</span>
   <% end %>
 </div>