Close ghost space when no reactions exist

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%;
 

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>