Fade out overflow on watcher avatars

app/assets/stylesheets/card-columns.css

@@ -567,14 +567,21 @@
     }
   }
 
-  .card.card--new {
+  /* Collection tools
+  /* -------------------------------------------------------------------------- */
+
+  .collection-tools.card {
     --border-color: var(--color-selected-dark);
     --border-size: 1px;
     --card-padding-block: var(--block-space);
 
-    border: 1px solid var(--color-selected-dark);
+    border: 1px solid var(--border-color);
     text-align: center;
 
+    .separator--horizontal {
+      margin-block: var(--block-space);
+    }
+
     .btn--link {
       font-size: 1.2em;
     }
@@ -596,6 +603,35 @@
     }
   }
 
+  .collection-tools__watching {
+    display: flex;
+    gap: 0.5ch;
+    inline-size: 100%;
+    margin-block: var(--block-space-half);
+    overflow: hidden;
+    place-content: center;
+    position: relative;
+
+    &:before,
+    &:after {
+      aspect-ratio: 0.5;
+      background: linear-gradient(to right, var(--color-canvas), transparent);
+      content: "";
+      inset-block: 0;
+      position: absolute;
+      z-index: 1;
+    }
+
+    &:before {
+      inset-inline-start: 0;
+    }
+
+    &:after {
+      inset-inline-end: 0;
+      rotate: 180deg;
+    }
+  }
+
   /* On Deck (Not Now)
   /* ------------------------------------------------------------------------ */
 

app/assets/stylesheets/separators.css

@@ -14,5 +14,6 @@
     border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
     border-inline: 0;
     display: flex;
+    inline-size: 100%;
   }
 }

app/helpers/accesses_helper.rb

@@ -35,7 +35,7 @@ module AccessesHelper
     displayed_watchers = watchers.limit(MAX_DISPLAYED_WATCHERS)
     overflow_count = watchers.count - MAX_DISPLAYED_WATCHERS
 
-    tag.div(class: "flex gap-half justify-center") do
+    tag.div(class: "collection-tools__watching") do
       safe_join([
         safe_join(displayed_watchers.map { |watcher| avatar_tag(watcher) }),
         (tag.span("+#{overflow_count}", class: "overflow-count") if overflow_count > 0)

app/views/columns/show/_add_card_button.html.erb

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