Move title back to the top, center filter input, hang toggle

app/assets/stylesheets/card-columns.css

@@ -492,6 +492,7 @@
     --column-color: var(--color-ink-lighter);
 
     margin-block: var(--cards-gap);
+    margin-inline-start: auto;
 
     .card {
       --card-color: var(--color-card-complete) !important;

app/views/cards/index.html.erb

@@ -18,7 +18,9 @@
     <% end %>
   </div>
 
-  <%= render "filters/settings", user_filtering: @user_filtering %>
+  <h1 class="header__title overflow-ellipsis">
+    <%= @user_filtering.selected_collections_label %>
+  </h1>
 
   <div class="header__actions header__actions--end">
     <% if collection = @filter.single_collection %>
@@ -27,6 +29,8 @@
   </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,19 +1,6 @@
 <% 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">
-
-      <div class="title-nav">
-        <h1 class="header__title overflow-ellipsis margin-block-end">
-          <%= @user_filtering.selected_collections_label %>
-        </h1>
-
-        <% user_filtering.collections.limit(5).last(4).each do |collection| %>
-          <div class="header__title overflow-ellipsis">
-            <%= link_to collection.name, cards_path(collection_ids: [ collection ]), class: "btn btn--plain font-weight-black txt-subtle txt-normal" %>
-          </div>
-        <% end %>
-      </div>
-
       <%= 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 %>
 

app/views/filters/_settings.html.erb

@@ -3,6 +3,9 @@
         class: class_names("filters flex align-center gap-half justify-center center margin-block-end", { "filters--expanded": user_filtering.expanded? }),
         data: { controller: "toggle-class", toggle_class_toggle_class: "filters--expanded" } do %>
     <div class="flex-inline center align-center gap-half" data-controller="toggle-enable">
+      <div class="btn btn-circle txt-x-small" style="visibility: hidden">
+        <!-- placeholder for centering -->
+      </div>
       <%= render "filters/settings/terms", user_filtering: user_filtering %>
       <%= render "filters/settings/controls", user_filtering: user_filtering %>