Rework truncation so tag and collection menus display correctly

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;

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

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>

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>

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>
 

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>
 

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>