From af390c436d5c679d41be65b4980b37321f1ecfff Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 11 Feb 2026 11:28:57 +0100
Subject: [PATCH] Allow board name/picker and tags to wrap on several lines

---
 app/assets/stylesheets/card-perma.css        | 21 ++++++++++++++++++++
 app/views/cards/display/perma/_tags.html.erb |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index b3d37d68a..0f661bf2b 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -63,6 +63,27 @@
       opacity: 0.2;
     }
 
+    .card__header {
+      @media (max-width: 639px) {
+        flex-wrap: wrap;
+        gap: var(--card-header-space) unset;
+      }
+    }
+
+    .card__tags {
+      @media (max-width: 639px) {
+        padding: 0.25lh;
+      }
+    }
+
+    .card__tags-list {
+      @media (min-width: 640px) {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+
     .card__body {
       position: relative;
 
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index ea4d1f76b..cdfede474 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -15,7 +15,7 @@
   </div>
 
   <% if card.tags.any? %>
-    <div class="min-width overflow-ellipsis">
+    <div class="card__tags-list min-width">
       <% card.tags.each_with_index do |tag, index| %>
         <%= link_to cards_path(board_ids: [ card.board ], tag_ids: [ tag.id ]),
               class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>