From 55a77b435c4748638cd301a178f44fd5d998ed65 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 19 Sep 2025 14:18:59 -0500
Subject: [PATCH] Flip it on its side

---
 app/assets/stylesheets/card-columns.css | 12 +++++++++++-
 app/views/cards/index.html.erb          |  6 +-----
 app/views/cards/index/_columns.html.erb |  3 +++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 151762490..5ee7f9db0 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -54,6 +54,16 @@
       position: absolute;
       z-index: 1;
     }
+
+    .header__title {
+      align-self: start;
+      flex-grow: 0;
+      font-style: oblique;
+      justify-self: start;
+      margin: var(--cards-gap) var(--cards-gap) auto auto;
+      text-transform: uppercase;
+      writing-mode: vertical-lr;
+    }
   }
 
   /* Cards
@@ -556,7 +566,7 @@
     --column-color: var(--color-ink-lighter);
 
     margin-block: var(--cards-gap);
-    margin-inline-start: var(--cards-gap);
+    margin-inline: var(--cards-gap) auto;
 
     @media (min-width: 640px) {
       padding-inline: var(--cards-gap);
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index 680535c0b..24f7b8562 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -18,9 +18,7 @@
     <% end %>
   </div>
 
-  <h1 class="header__title overflow-ellipsis" style="view-transistion-name: card-collection-title">
-    <%= @user_filtering.selected_collections_label %>
-  </h1>
+  <%= render "filters/settings", user_filtering: @user_filtering %>
 
   <div class="header__actions header__actions--end">
     <% if collection = @filter.single_collection %>
@@ -29,8 +27,6 @@
   </div>
 <% end %>
 
-<%= render "filters/settings", user_filtering: @user_filtering %>
-
 <%= tag.div data: {
       controller: "drag-and-drop",
       drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
diff --git a/app/views/cards/index/_columns.html.erb b/app/views/cards/index/_columns.html.erb
index c382a2383..38355b7fe 100644
--- a/app/views/cards/index/_columns.html.erb
+++ b/app/views/cards/index/_columns.html.erb
@@ -1,6 +1,9 @@
 <% cache @cache_key do %>
   <%= turbo_frame_tag :card_columns do %>
     <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed">
+      <h1 class="header__title overflow-ellipsis"">
+        <%= @user_filtering.selected_collections_label %>
+      </h1>
       <%= render "cards/index/engagement/on_deck", user_filtering: user_filtering, **on_deck.to_h %>
       <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %>