Consistently align and size all elements

app/assets/stylesheets/reactions.css

@@ -1,5 +1,6 @@
 @layer components {
   .reactions {
+    --reaction-size: 2rem;
     --column-gap: 0.4ch;
     --reaction-border-color: var(--color-ink-lighter);
     --row-gap: 0;
@@ -14,27 +15,32 @@
   }
 
   .reaction {
+    --btn-size: 100%;
+
+    align-items: center;
+    background-color: var(--color-canvas);
+    block-size: var(--reaction-size);
     border: 1px solid var(--reaction-border-color);
     border-radius: 4rem;
-    margin-block-start: calc(var(--block-space-half) / 2);
+    display: inline-flex;
+    gap: var(--column-gap);
+    max-inline-size: 100%;
     opacity: 1;
     padding: 0.1em 0.25em 0.1em 0.12em;
-    transition: opacity 100ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
+    postion: relative;
+    transition: opacity 100ms ease-in-out, transform 150ms ease-in-out;
 
     .btn {
       font-size: 0.6em;
-
-      &:is(.reaction__delete) {
-        display: none;
-
-        .expanded & {
-          display: flex;
-        }
-      }
+      inline-size: auto;
     }
+  }
+
+  .reaction--deleteable {
+    cursor: pointer;
 
     @media (any-hover: hover) {
-      &:where(:not(:active):hover) {
+      &:not(:active):hover {
         --reaction-border-color: var(--color-ink-medium);
 
         box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
@@ -49,15 +55,18 @@
     }
   }
 
-  .btn:is(.reaction__action) {
-    --btn-border-color: var(--reaction-border-color);
+  /* Make the avatar and delete buttons fit nicely within the reaction */
+  .reaction__avatar,
+  .reaction__form-label,
+  .reaction form {
+    block-size: var(--btn-size);
+  }
 
-    font-size: 0.74em;
+  .reaction__delete {
+    display: none;
 
-    @media (any-hover: hover) {
-      &:where(:not(:active):hover) {
-        --reaction-border-color: var(--color-ink-medium);
-      }
+    .expanded & {
+      display: flex;
     }
   }
 
@@ -92,7 +101,15 @@
     animation: scale-fade-out 0.2s both;
   }
 
+  .reaction__action {
+    --btn-border-color: var(--reaction-border-color);
+    --btn-size: var(--reaction-size);
+
+    font-size: 0.75em;
+  }
+
   .reaction__popup {
+    --panel-border-radius: 1.2em;
     --panel-padding: 0.5ch;
     --offset: calc(-1 * var(--panel-padding));
 
@@ -107,7 +124,8 @@
 
     .btn {
       --btn-icon-size: 1.5ch;
-      --btn-size: 1.75rem;
+      --btn-size: var(--reaction-size);
+      --btn-border-color: var(--color-canvas);
 
       position: relative;
 

app/javascript/controllers/reaction_delete_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static classes = [ "reveal", "perform" ]
+  static classes = [ "deleteable", "reveal", "perform" ]
   static targets = [ "button", "content" ]
   static values = { reacterId: Number }
 
@@ -27,6 +27,7 @@ export default class extends Controller {
     this.contentTarget.role = "button"
     this.contentTarget.tabIndex = 0
     this.contentTarget.ariaExpanded = false
+    this.element.classList.add(this.deleteableClass)
   }
 
   get #currentUserIsReacter() {

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

@@ -1,9 +1,12 @@
 <div id="<%= dom_id(reaction) %>"
-      class="reaction flex-inline postion--relative max-width align-center fill-white gap"
+      class="reaction"
       data-controller="reaction-delete"
       data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>"
-      data-controller="reaction-delete" data-reaction-delete-perform-class="reaction--deleting"
-      data-reaction-delete-reveal-class="expanded" data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>">
+      data-controller="reaction-delete"
+      data-reaction-delete-perform-class="reaction--deleting"
+      data-reaction-delete-reveal-class="expanded"
+      data-reaction-delete-deleteable-class="reaction--deleteable"
+      data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>">
   <figure class="reaction__avatar margin-none flex-item-no-shrink">
     <%= avatar_tag reaction.reacter, aria: { label: "#{reaction.reacter.name} reacted #{reaction.content}" } %>
   </figure>

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

@@ -15,7 +15,7 @@
             <% EmojiHelper::REACTIONS.each do |character, title| %>
               <%= form_with model: [ comment.card, comment, Reaction.new ], data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close"} do |form| %>
                 <%= hidden_field_tag "comment[content]", character %>
-                <%= form.button type: "submit", title: title, class: "reaction__quick-emoji-btn btn btn--circle borderless", data: { emoji: character } do %>
+                <%= form.button type: "submit", title: title, class: "reaction__quick-emoji-btn btn btn--circle", data: { emoji: character } do %>
                   <span class="reaction__emoji"><%= character %></span>
                   <span class="for-screen-reader"><%= title %></span>
                 <% end %>
@@ -24,7 +24,7 @@
 
             <div class="flex-inline" data-controller="soft-keyboard">
               <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
-                    class: "btn btn--circle borderless", action: "soft-keyboard#open" do %>
+                    class: "btn btn--circle", action: "soft-keyboard#open" do %>
                 <%= icon_tag "reaction" %> <span class="for-screen-reader">Add a reaction</span>
               <% end %>
             </div>

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

@@ -1,6 +1,6 @@
 <%= turbo_frame_tag @comment, :new_reaction do %>
   <%= form_with model: [ @comment.card, @comment, Reaction.new ],
-        class: "reaction reaction__form flex-inline postion--relative max-width align-center fill-white gap expanded",
+        class: "reaction reaction__form expanded",
         html: { aria: { label: "New reaction" } },
         data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %>
     <label class="reaction__form-label flex gap" style="--column-gap: 0.7ch;">
@@ -12,12 +12,12 @@
             required: true, pattern: /\S+.*/, class: "input reaction__input txt-small", aria: { label: "Add a reaction" } %>
     </label>
 
-    <%= form.button class: "btn btn--reversed", type: "submit" do %>
+    <%= form.button class: "btn btn--circle borderless btn--reversed", type: "submit" do %>
       <%= icon_tag "check" %> <span class="for-screen-reader">Submit</span>
     <% end %>
 
     <%= link_to card_comment_reactions_path(@comment.card, @comment), role: "button",
-          data: { turbo_frame: dom_id(@comment, :reacting), form_target: "cancel" }, class: "btn btn--negative" do %>
+          data: { turbo_frame: dom_id(@comment, :reacting), form_target: "cancel" }, class: "btn btn--circle borderless btn--negative" do %>
       <%= icon_tag "minus" %> <span class="for-screen-reader">Cancel</span>
     <% end %>
   <% end %>