Move Add Card button to header

app/assets/stylesheets/header.css

@@ -1,8 +1,9 @@
 @layer components {
   /* Centered title with space for two buttons on either side */
   .header {
-    --header-gap: 0.5rem;
-    --header-btn-size: 2.65em;
+    --header-gap: 0.5ch;
+    --btn-icon-size: 1rem;
+    --header-btn-size: 2rem;
     --header-button-count: 0;
     --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count));
 
@@ -18,13 +19,20 @@
 
   .header__actions {
     display: flex;
+    font-size: var(--text-x-small);
     gap: var(--header-gap);
     inline-size: var(--header-actions-width);
     min-inline-size: fit-content;
   }
 
-  .header__actions--start { margin-inline-end: auto; }
-  .header__actions--end { margin-inline-start: auto; }
+  .header__actions--start {
+    margin-inline-end: auto;
+  }
+
+  .header__actions--end {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+  }
 
   .header__title {
     color: inherit;
@@ -33,13 +41,4 @@
     margin: 0 auto;
     text-align: center;
   }
-
-  .header__title--actions {
-    --btn-size: 2rem;
-    --btn-icon-size: 1rem;
-
-    display: flex;
-    align-items: center;
-    gap: 0.33ch;
-  }
 }

app/views/cards/index.html.erb

@@ -6,9 +6,19 @@
   <%= render "cards/index/header", filter: @filter %>
 <% end %>
 
-<header class="header">
-  <h1 class="header__title header__title--actions" style="view-transistion-name: card-collection-title">
+<header class="header" style="--header-actions-width: 7rem;">
+  <div class="header__actions header__actions--start">
+    <% if collection = @filter.single_collection || Current.user.collections.first %>
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link" do %>
+        <%= icon_tag "add" %>
+        Add a card
+      <% end %>
+    <% end %>
+  </div>
+  <h1 class="header__title" style="view-transistion-name: card-collection-title">
     <span class="overflow-ellipsis"><%= filter_title @filter %></span>
+  </h1>
+  <div class="header__actions header__actions--end">
     <% if collection = @filter.single_collection %>
       <%= access_involvement_advance_button collection, Current.user %>
 
@@ -17,7 +27,7 @@
         <span class="for-screen-reader">Settings for <%= collection.name %></span>
       <% end %>
     <% end %>
-  </h1>
+  </div>
 </header>
 
 <%= render "filters/settings", filter: @filter %>

app/views/cards/index/engagement/_considering.html.erb

@@ -3,15 +3,6 @@
     Considering
   </h2>
 
-  <% if collection = filter.single_collection || Current.user.collections.first %>
-    <%= button_to collection_cards_path(collection), method: :post, class: "card card--new-card-button btn", form_class: "full-width" do %>
-      <div class="gap-half justify-center txt-xx-large pad-block margin-block-half">
-        <%= icon_tag "add" %>
-        <span>Add a new card</span>
-      </div>
-    <% end %>
-  <% end %>
-
   <% if page.used? %>
     <%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %>
 

app/views/events/index.html.erb

@@ -9,9 +9,9 @@
 <% end %>
 
 <header class="header margin-block-end" style="--header-button-count: 3;">
-  <div class="header__actions header_-actions--start">
+  <div class="header__actions header__actions--start">
     <% if collection = @filter.single_collection || Current.user.collections.first %>
-      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link txt-small" do %>
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link" do %>
         <%= icon_tag "add" %>
         <span>Add a card</span>
       <% end %>
@@ -37,7 +37,7 @@
     <% end %>
   </h1>
 
-  <div class="header__actions header_-actions--end"></div>
+  <div class="header__actions header__actions--end"></div>
 </header>
 <div class="events" id="activity">
   <%= render "events/day", day_timeline: @day_timeline %>