Merge pull request #1318 from basecamp/show-all-watchers

Show all overflow watchers in a dialog

app/assets/stylesheets/card-columns.css

@@ -591,6 +591,7 @@
 
     border: 1px solid var(--border-color);
     text-align: center;
+    z-index: 5;
 
     .separator--horizontal {
       margin-block: var(--block-space);
@@ -618,32 +619,28 @@
   }
 
   .collection-tools__watching {
+    --btn-size: 32px;
+    --gap: 0.5ch;
+
     display: flex;
-    gap: 0.5ch;
+    gap: var(--gap);
     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;
-    }
+  .collection-tools__watching-dialog {
+    --panel-padding: 2ch;
+    --panel-size: 100%;
 
-    &:before {
-      inset-inline-start: 0;
-    }
-
-    &:after {
-      inset-inline-end: 0;
-      rotate: 180deg;
-    }
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+    inset-block-start: 0;
+    justify-content: center;
+    position: absolute;
+    z-index: 1;
   }
 
   /* On Deck (Not Now)

app/helpers/accesses_helper.rb

@@ -35,7 +35,12 @@ module AccessesHelper
     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)
+        (tag.div(data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" }) do
+          concat tag.button("+#{overflow_count}", class: "overflow-count btn btn--circle borderless", data: { action: "dialog#open" }, aria: { label: "Show #{overflow_count} more watchers" })
+          concat(tag.dialog(class: "collection-tools__watching-dialog dialog panel", data: { dialog_target: "dialog" }, aria: { hidden: "true" }) do
+            safe_join(watchers.map { |watcher| avatar_tag(watcher) })
+          end)
+        end if overflow_count > 0)
       ].compact)
     end
   end