From c6587a0562d72dc6eca74499c35cd801684947b0 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 30 Jul 2025 12:25:03 -0500
Subject: [PATCH] Better truncation for header__titles

---
 app/assets/stylesheets/header.css    | 1 +
 app/views/cards/index.html.erb       | 4 ++--
 app/views/cards/show.html.erb        | 2 +-
 app/views/collections/edit.html.erb  | 2 +-
 app/views/public/cards/show.html.erb | 4 ++--
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css
index 2b85dbde0..32db849a5 100644
--- a/app/assets/stylesheets/header.css
+++ b/app/assets/stylesheets/header.css
@@ -39,6 +39,7 @@
     font-size: var(--text-large);
     font-weight: 900;
     margin: 0 auto;
+    min-inline-size: 0;
     text-align: center;
   }
 }
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index c82053692..85dbf740a 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -21,8 +21,8 @@
       <% end %>
     <% end %>
   </div>
-  <h1 class="header__title" style="view-transistion-name: card-collection-title">
-    <span class="overflow-ellipsis"><%= filter_title @filter %></span>
+  <h1 class="header__title overflow-ellipsis" style="view-transistion-name: card-collection-title">
+    <%= filter_title @filter %>
   </h1>
   <div class="header__actions header__actions--end">
     <% if collection = @filter.single_collection %>
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index 78e2fd4ef..a203b4bb2 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -35,7 +35,7 @@
 
 <header class="header card-perma__collection-header">
   <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-    <span>
+    <span class="overflow-ellipsis">
       &larr;
       <strong class="font-black"><%= @card.collection.name %></strong>
     </span>
diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb
index 8daef8762..c06780237 100644
--- a/app/views/collections/edit.html.erb
+++ b/app/views/collections/edit.html.erb
@@ -6,7 +6,7 @@
       <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>
     </div>
 
-    <h1 class="header__title"><%= @page_title %></h1>
+    <h1 class="header__title overflow-ellipsis"><%= @page_title %></h1>
 
     <div class="header__actions header__actions--end"></div>
   </nav>
diff --git a/app/views/public/cards/show.html.erb b/app/views/public/cards/show.html.erb
index 1ce32c4ba..1502fb05a 100644
--- a/app/views/public/cards/show.html.erb
+++ b/app/views/public/cards/show.html.erb
@@ -15,7 +15,7 @@
 <% content_for :header do %>
   <header class="header card-perma__collection-header">
   <%= link_to published_collection_url(@card.collection), class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-    <span>
+    <span class="overflow-ellipsis">
       &larr;
       <strong class="font-black"><%= @card.collection.name %></strong>
     </span>
@@ -45,4 +45,4 @@
       </footer>
     <% end %>
   </div>
-</section> 
\ No newline at end of file
+</section>