From 245e2ea3bd6853f6c2b951d6cfd409c33ae6d69e Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 4 Dec 2024 17:42:47 -0600
Subject: [PATCH] Ensure tags don't affect the bubble shape or spill out of the
 container

---
 app/assets/stylesheets/bubbles.css   | 7 +++++++
 app/assets/stylesheets/utilities.css | 4 ++--
 app/views/bubbles/_bubble.html.erb   | 2 +-
 app/views/bubbles/_tags.html.erb     | 6 ++++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 9b3a42b16..148384d85 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -292,14 +292,21 @@
 }
 
 .bubble__tags{
+  --row-gap: 0;
+
   font-size: var(--text-small);
   margin-block-start: 0.3cqb;
+  max-inline-size: 75cqi;
 
   .bubble__perma & {
     font-size: var(--text-medium);
   }
 }
 
+.bubble__tag {
+  max-inline-size: 75cqi;
+}
+
 .bubble__title {
   -webkit-line-clamp: var(--lines, 5);
   -webkit-box-orient: vertical;
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 61aab22a4..60de39c8d 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -69,8 +69,8 @@
 }
 
 .gap-half {
-  column-gap: var(--inline-space-half);
-  row-gap: var(--block-space-half);
+  column-gap: var(--column-gap, var(--inline-space-half));
+  row-gap: var(--row-gap, var(--block-space-half));
 }
 
 /* Sizing */
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index 0078e865d..09d680c94 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -11,7 +11,7 @@
         <% end %>
       </h1>
 
-      <div class="bubble__tags flex align-end justify-center gap-half">
+      <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
         <%= render "bubbles/tags", bubble: bubble %>
       </div>
     </div>
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb
index 1783d87f3..c38e63103 100644
--- a/app/views/bubbles/_tags.html.erb
+++ b/app/views/bubbles/_tags.html.erb
@@ -1,4 +1,6 @@
 <% bubble.tags.each do |tag| %>
-  <%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
-        class: "btn btn--plain fill-transparent", style: "color: #{bubble.color}" %>
+  <%= link_to bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
+        class: "bubble__tag btn btn--plain fill-transparent min-width", style: "color: #{bubble.color}" do %>
+    <span class="overflow-ellipsis"><%= tag.hashtag %></span>
+  <% end %>
 <% end %>