From 5bb6accc2c105fb3554f64d264fcbf8a7e6edbb5 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 31 Jan 2025 17:24:00 -0600
Subject: [PATCH] Ensure long titles wrap, comment counts don't

---
 app/views/bubbles/list/_bubble.html.erb | 28 +++++++++++++------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/views/bubbles/list/_bubble.html.erb b/app/views/bubbles/list/_bubble.html.erb
index 16530e17f..576bff8ab 100644
--- a/app/views/bubbles/list/_bubble.html.erb
+++ b/app/views/bubbles/list/_bubble.html.erb
@@ -1,26 +1,28 @@
 <li class="<%= class_names("flex align-center gap-half margin-none", drafted: bubble.drafted?) %>" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
     data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
-  <%= link_to bucket_bubble_path(bubble.bucket, bubble) do %>
+  <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "flex-item-no-shrink" do %>
     <div class="bubble__shape flex-item-no-shrink"></div>
   <% end %>
 
-  <div class="flex flex-column flex-item-grow">
+  <div class="flex flex-column flex-item-grow min-width">
     <div class="flex align-center gap-half margin-none">
       <div class="flex flex-column min-width">
-        <div class="flex align-center gap-half flex-item-no-shrink">
-          <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link" do %>
-            <strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
+        <div class="flex align-center gap-half max-width full-width">
+          <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex-item-grow max-width overflow-ellipsis" do %>
+            <strong class="bubble__title-text"><%= bubble.title %></strong>
           <% end %>
 
           <% if bubble.messages.many? %>
-            <span class="translucent">(<%= bubble.messages.count %>)</span>
+            <span class="translucent txt-nowrap flex-item-no-shrink">(<%= bubble.messages.count %>)</span>
           <% end %>
 
-          <% bubble.assignees.each do |assignee| %>
-            <%= link_to bubbles_path(@filter.as_params.merge(assignee_ids: [ assignee.id ])), class: "btn avatar", style: "font-size: 0.4em;" do %>
-              <%= avatar_image_tag assignee, loading: :lazy %>
+          <span class="flex-item-no-shrink flex">
+            <% bubble.assignees.each do |assignee| %>
+              <%= link_to bubbles_path(@filter.as_params.merge(assignee_ids: [ assignee.id ])), class: "btn avatar", style: "font-size: 0.4em;" do %>
+                <%= avatar_image_tag assignee, loading: :lazy %>
+              <% end %>
             <% end %>
-          <% end %>
+          </span>
         </div>
       </div>
 
@@ -33,9 +35,9 @@
       <% end %>
     </div>
 
-    <div class="flex gap-half txt-small full-width">
-      <span><%= "Added by #{bubble.creator.name} on" %> <%= local_datetime_tag bubble.created_at, style: :shortdate %></span>
-      <span><%= render "bubbles/tags", bubble: bubble %></span>
+    <div class="flex gap-half txt-small full-width min-width">
+      <span class="overflow-ellipsis"><%= "Added by #{bubble.creator.name} on" %> <%= local_datetime_tag bubble.created_at, style: :shortdate %></span>
+      <span class="flex-item-no-shrink"><%= render "bubbles/tags", bubble: bubble %></span>
     </div>
   </div>
 </li>
\ No newline at end of file