Fix spacing, simplify layout

app/assets/stylesheets/card-columns.css

@@ -268,27 +268,24 @@
       .btn {
         &.btn--link {
           font-size: 1.2em;
+          margin-block-start: 0.1em;
         }
 
         &:not(.btn--link) {
           border: 0;
           color: var(--color-link);
-          margin-block: calc(var(--block-space) * -0.5) calc(var(--block-space) * 0.25);
         }
       }
 
       footer {
         font-size: var(--text-x-small);
-        margin-block-end: calc(var(--block-space) * -1);
-      }
-
-      .separator--horizontal {
-        margin-block: 0.7em 0.7em;
+        margin-block-end: calc(var(--block-space-half) * -1);
       }
 
       .overflow-count {
         font-size: 1.2em;
-        padding: 0.2em;
+        font-weight: 500;
+        padding: 0.5em 0.3em;
       }
     }
 

app/helpers/accesses_helper.rb

@@ -1,5 +1,5 @@
 module AccessesHelper
-  MAX_DISPLAYED_WATCHERS = 8
+  MAX_DISPLAYED_WATCHERS = 3
 
   def access_menu_tag(collection, **options, &)
     tag.menu class: [ options[:class], { "toggler--toggled": collection.all_access? } ], data: {

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

@@ -1,5 +1,5 @@
 <% if collection = user_filtering.single_collection %>
-  <div class="card card--new">
+  <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>
@@ -7,8 +7,8 @@
 
     <hr class="separator--horizontal full-width" aria-hidden="true">
 
-    <footer class="flex flex-column gap-half">
-      <div><strong class="txt-uppercase">Watching for new cards</strong></div>
+    <footer class="flex flex-column align-center gap-half">
+      <strong class="txt-uppercase">Watching for new cards</strong>
       <%= access_involvement_advance_button(collection, Current.user, show_watchers: true) %>
     </footer>
   </div>