Merge pull request #1099 from basecamp/watching-polish

Watching polish

app/assets/stylesheets/card-columns.css

@@ -273,12 +273,22 @@
         &: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) / -2);
+        margin-block-end: calc(var(--block-space) * -1);
+      }
+
+      .separator--horizontal {
+        margin-block: 0.7em 0.7em;
+      }
+
+      .overflow-count {
+        font-size: 1.2em;
+        padding: 0.2em;
       }
     }
 

app/helpers/accesses_helper.rb

@@ -25,14 +25,19 @@ module AccessesHelper
   end
 
   def collection_watchers_list(collection)
-    tag.div(class: "flex flex-wrap gap-half justify-center") do
-      safe_join(
-        collection.users
-                  .without(User.system)
-                  .where(accesses: { involvement: :watching })
-                  .distinct
-                  .map { |watcher| avatar_tag(watcher) }
-      )
+    watchers = collection.users
+                        .without(User.system)
+                        .where(accesses: { involvement: :watching })
+                        .distinct
+
+    displayed_watchers = watchers.limit(8)
+    overflow_count = watchers.count - 8
+
+    tag.div(class: "flex gap-half justify-center") do
+      safe_join([
+        safe_join(displayed_watchers.map { |watcher| avatar_tag(watcher) }),
+        (tag.span("+#{overflow_count}", class: "overflow-count") if overflow_count > 0)
+      ].compact)
     end
   end
 

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

@@ -1,6 +1,6 @@
 <% if collection = user_filtering.single_collection %>
   <div class="card card--new">
-    <%= button_to collection_cards_path(collection), method: :post, class: "btn", form: { data: { turbo_frame: "_top" } } do %>
+    <%= 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 %>
@@ -8,7 +8,7 @@
     <hr class="separator--horizontal full-width" aria-hidden="true">
 
     <footer class="flex flex-column gap-half">
-      <strong class="txt-uppercase">Watching for new cards</strong>
+      <div><strong class="txt-uppercase">Watching for new cards</strong></div>
       <%= access_involvement_advance_button(collection, Current.user, show_watchers: true) %>
     </footer>
   </div>