Flip it on its side

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);

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",

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