From 2404d6d0f942cc150fba7aeb102ecde26f45958f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 18 Sep 2025 16:18:06 -0500
Subject: [PATCH] Use the same markup for public card columns

---
 .../cards/display/_public_preview.html.erb    | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/views/cards/display/_public_preview.html.erb b/app/views/cards/display/_public_preview.html.erb
index 95ccc0740..c35af99a8 100644
--- a/app/views/cards/display/_public_preview.html.erb
+++ b/app/views/cards/display/_public_preview.html.erb
@@ -1,33 +1,27 @@
 <% cache card.cache_invalidation_parts.for_preview do %>
   <%= card_article_tag card, class: "card" do %>
-    <div class="flex gap">
-      <div class="flex flex-column flex-item-grow">
-        <header class="card__header">
+    <div class="flex flex-column flex-item-grow max-inline-size">
+      <header class="card__header">
 
-          <div class="card__collection flex align-start">
-            <span class="card__id"><%= card.id %></span>
-            <span class="card__collection-name">
-              <span class="overflow-ellipsis"><%= card.collection.name %></span>
-            </span>
-          </div>
-
-          <%= render "cards/display/preview/tags", card: card %>
-        </header>
-
-        <div class="card__body justify-space-between">
-          <div class="card__content">
-            <h1 class="card__title overflow-line-clamp">
-              <%= card.title %>
-            </h1>
-
-            <%= link_to published_card_path(card), class: "card__link", title: card_title_tag(card) do %>
-              <span class="for-screen-reader"><%= card.title %></span>
-            <% end %>
-          </div>
+        <div class="card__collection flex align-start">
+          <span class="card__id"><%= card.id %></span>
+          <span class="card__collection-name">
+            <span class="overflow-ellipsis"><%= card.collection.name %></span>
+          </span>
         </div>
-      </div>
 
-      <%= render "cards/display/public_preview/stages", card: card if card.doing? %>
+        <%= render "cards/display/preview/tags", card: card %>
+      </header>
+
+      <div class="card__body justify-space-between">
+        <div class="card__content">
+          <h1 class="card__title overflow-line-clamp">
+            <%= card.title %>
+          </h1>
+        </div>
+
+        <%= render "cards/display/public_preview/stages", card: card if card.doing? %>
+      </div>
     </div>
 
     <footer class="card__footer">
@@ -36,6 +30,10 @@
 
     <%= render "cards/display/common/background", card: card %>
 
+    <%= link_to published_card_path(card), class: "card__link", title: card_title_tag(card) do %>
+      <span class="for-screen-reader"><%= card.title %></span>
+    <% end %>
+
     <% if card.entropic? %>
       <%= render "cards/display/preview/bubble", card: card %>
     <% end %>