Tighten up reactions styles

app/assets/stylesheets/reactions.css

@@ -29,6 +29,7 @@
       }
 
       .reactions__trigger {
+        --btn-border-color: var(--color-ink-lightest);
         background-color: var(--color-ink-lightest);
 
         &:not(:hover) {
@@ -38,10 +39,23 @@
     }
   }
 
+  .reactions__trigger {
+    --btn-border-color: var(--reaction-border-color);
+
+    img {
+      block-size: 65%;
+      inline-size: 65%;
+    }
+  }
+
   .reactions__list {
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--inline-space-half);
+
+    &:not(:has(.reaction)) {
+      display: none;
+    }
   }
 
   /* Single reaction

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: "reactions__trigger btn btn--circle borderless", action: "soft-keyboard#open",
+            class: "reactions__trigger btn btn--circle", action: "soft-keyboard#open",
             data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %>
         <%= image_tag "boost-color.svg", aria: { hidden: true } %>
         <span class="for-screen-reader">Add your own reaction</span>