From 8d1a4ec73a10ea4c0bc011f4ececadcb5a47e29a Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 7 May 2025 15:15:28 -0500
Subject: [PATCH] Close ghost space when no reactions exist

---
 app/assets/stylesheets/reactions.css                   | 10 ++++++++++
 app/views/cards/comments/reactions/_reactions.html.erb |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 51f797456..47f9471cb 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -13,6 +13,16 @@
     margin-inline: calc(var(--column-gap) / -1);
   }
 
+  .reactions__list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--column-gap);
+
+    &:not(:has(.reaction)) {
+      display: none;
+    }
+  }
+
   .reaction {
     --btn-size: 100%;
 
diff --git a/app/views/cards/comments/reactions/_reactions.html.erb b/app/views/cards/comments/reactions/_reactions.html.erb
index ff179fa0c..73a79812b 100644
--- a/app/views/cards/comments/reactions/_reactions.html.erb
+++ b/app/views/cards/comments/reactions/_reactions.html.erb
@@ -1,6 +1,6 @@
 <%= turbo_frame_tag comment, :reacting do %>
   <div class="reactions">
-    <div id="<%= dom_id(comment, :reactions) %>" class="flex-inline flex-wrap gap">
+    <div id="<%= dom_id(comment, :reactions) %>" class="reactions__list">
       <%= render partial: "cards/comments/reactions/reaction", collection: comment.reactions.includes(:reacter).ordered %>
     </div>