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>