Simpler add a column button

app/assets/stylesheets/card-columns.css

@@ -172,7 +172,7 @@
     }
 
     .progress {
-      --max-height: 480px;
+      --max-height: 540px;
 
       background-color: var(--column-color);
       border-radius: 0 0 2em 2em;
@@ -425,12 +425,25 @@
           margin-block-start: 0.1em;
         }
 
-        &:not(.btn--link) {
+        &:not(.btn--link, .btn--circle) {
           border: 0;
           color: var(--color-link);
         }
       }
 
+      .column--new {
+        position: relative;
+
+        &:after {
+          border-inline-start: 1px solid var(--color-ink-light);
+          content: "";
+          block-size: calc(var(--btn-size) * 0.5);
+          inset: var(--btn-size) 0 0 0;
+          position: absolute;
+          transform: translateX(50%);
+        }
+      }
+
       footer {
         font-size: var(--text-x-small);
         margin-block-end: calc(var(--block-space-half) * -1);

app/views/cards/index/_add_card_button.html.erb

@@ -1,9 +1,18 @@
 <% if collection = user_filtering.single_collection %>
   <div class="card card--new flex flex-column gap-half">
-    <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link", form: { data: { turbo_frame: "_top" } } do %>
-      <%= icon_tag "add" %>
-      <span>Add a card</span>
-    <% end %>
+    <div class="flex align-center gap justify-space-between">
+      <div class="btn btn--circle txt-x-small" style="visibility: hidden"><!-- layout placeholder --></div>
+
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link", form: { data: { turbo_frame: "_top" } } do %>
+        <%= icon_tag "add" %>
+        <span>Add a card</span>
+      <% end %>
+
+      <button class="btn btn--circle txt-x-small column--new" style="margin-block: var(--cards-gap);">
+        <%= icon_tag "add" %>
+        <span class="for-screen-reader">Add a new column</span>
+      </button>
+    </div>
 
     <hr class="separator--horizontal full-width" aria-hidden="true">
 

app/views/cards/index/_columns.html.erb

@@ -10,11 +10,6 @@
         <% end %>
       <% end %>
 
-      <button class="btn btn--circle txt-x-small" style="margin-block: var(--cards-gap);">
-        <%= icon_tag "add" %>
-        <span class="for-screen-reader">Add a new stage</span>
-      </button>
-
       <%= render "cards/index/engagement/closed", user_filtering: user_filtering, **closed.to_h %>
     </div>
   <% end %>