From cc407f6198604498fe926669ee477e2c6bf00d38 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 17 Jun 2025 16:26:54 -0500
Subject: [PATCH] Rework truncation so tag and collection menus display
 correctly

---
 app/assets/stylesheets/cards.css                         | 9 ++++++---
 app/views/cards/display/_public_preview.html.erb         | 4 +++-
 app/views/cards/display/common/_collection.html.erb      | 3 ++-
 app/views/cards/display/perma/_collection.html.erb       | 2 +-
 app/views/events/event/_layout.html.erb                  | 4 ++--
 .../notifications/notification/event/_header.html.erb    | 4 ++--
 .../notifications/notification/mention/_header.html.erb  | 4 ++--
 7 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index ca0603571..8b8675790 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -62,16 +62,20 @@
     background-color: var(--card-color);
     border-radius: var(--border-radius) 0 var(--border-radius) 0;
     color: var(--color-ink-inverted);
-    display: flex;
+    display: inline-flex;
     font-weight: 800;
-    overflow: hidden;
+    max-inline-size: 100%;
+    min-inline-size: 0;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
   }
 
   .card__collection-name {
     border-inline-start: 1px solid color-mix(in srgb, var(--color-ink-inverted) 33%, var(--card-color));
     color: currentcolor;
+    display: flex;
     margin-inline-start: var(--inline-space-half);
+    max-inline-size: 100%;
+    min-inline-size: 0;
     padding-inline-start: calc(var(--inline-space) * 0.75);
     text-transform: uppercase;
 
@@ -120,7 +124,6 @@
     margin-inline-start: calc(-1 * var(--card-padding-inline));
     max-inline-size: 100%;
     min-inline-size: 0;
-    overflow: hidden;
 
     .workflow-stage {
       display: none;
diff --git a/app/views/cards/display/_public_preview.html.erb b/app/views/cards/display/_public_preview.html.erb
index 4d5af3400..c72923ead 100644
--- a/app/views/cards/display/_public_preview.html.erb
+++ b/app/views/cards/display/_public_preview.html.erb
@@ -6,7 +6,9 @@
 
           <div class="card__collection flex align-start">
             <span class="card__id"><%= card.id %></span>
-            <span class="card__collection-name overflow-ellipsis"><%= card.collection.name %></span>
+            <span class="card__collection-name">
+              <span class="overflow-ellipsis"><%= card.collection.name %></span>
+            </span>
           </div>
 
           <%= render "cards/display/preview/tags", card: card %>
diff --git a/app/views/cards/display/common/_collection.html.erb b/app/views/cards/display/common/_collection.html.erb
index 2fe9356dc..08d223974 100644
--- a/app/views/cards/display/common/_collection.html.erb
+++ b/app/views/cards/display/common/_collection.html.erb
@@ -1,5 +1,6 @@
 <label class="card__collection flex align-center">
   <span class="card__id"><%= card.id %></span>
-  <%= tag.span card.collection.name, class: "card__collection-name overflow-ellipsis" %>
+  <span class="card__collection-name">
+    <span class="overflow-ellipsis"><%= card.collection.name %></span>
   <%= yield %>
 </label>
\ No newline at end of file
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index 36e5e3b4f..d418dffca 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -1,5 +1,5 @@
 <%= render "cards/display/common/collection", card: card do %>
-  <div class="position-relative txt-small" data-controller="dialog" data-dialog-modal-value="true" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+  <div class="position-relative txt-small" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
     <button class="collection-picker__button btn btn--reversed card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
       <%= icon_tag "caret-down" %>
       <span class="for-screen-reader">Choose a collection for this card</span>
diff --git a/app/views/events/event/_layout.html.erb b/app/views/events/event/_layout.html.erb
index dd940920c..501c042a9 100644
--- a/app/views/events/event/_layout.html.erb
+++ b/app/views/events/event/_layout.html.erb
@@ -8,8 +8,8 @@
   <div class="card__header flex align-start gap full-width">
     <div class="card__collection flex-inline align-start">
       <span class="card__id"><%= card.id %></span>
-      <span class="card__collection-name overflow-ellipsis">
-        <%= event.collection.name %>
+      <span class="card__collection-name">
+        <span class="overflow-ellipsis"><%= event.collection.name %></span>
       </span>
     </div>
 
diff --git a/app/views/notifications/notification/event/_header.html.erb b/app/views/notifications/notification/event/_header.html.erb
index 1716da3f9..0b26b8f07 100644
--- a/app/views/notifications/notification/event/_header.html.erb
+++ b/app/views/notifications/notification/event/_header.html.erb
@@ -1,7 +1,7 @@
 <div class="card__collection">
   <span class="card__id"><%= notification.card.id %></span>
-  <span class="card__collection-name overflow-ellipsis">
-    <%= notification.card.collection.name %>
+  <span class="card__collection-name">
+    <span class="overflow-ellipsis"><%= notification.card.collection.name %></span>
   </span>
 </div>
 
diff --git a/app/views/notifications/notification/mention/_header.html.erb b/app/views/notifications/notification/mention/_header.html.erb
index d0af4a644..34d0767d3 100644
--- a/app/views/notifications/notification/mention/_header.html.erb
+++ b/app/views/notifications/notification/mention/_header.html.erb
@@ -1,7 +1,7 @@
 <div class="card__collection">
   <span class="card__id"><%= notification.card.id %></span>
-  <span class="card__collection-name overflow-ellipsis">
-    <%= notification.card.collection.name %>
+  <span class="card__collection-name">
+    <span class="overflow-ellipsis"><%= notification.card.collection.name %></span>
   </span>
 </div>