Improve assignee bubble display, especially when there are multiple assignees

app/assets/stylesheets/bubbles.css

@@ -137,17 +137,37 @@
   &.bubble__assignee {
     aspect-ratio: 1;
     font-size: 4.5cqi;
-    inset: -2cqi auto auto 26cqi;
-    padding: 0.4em;
+    inset: 4cqb auto auto -2cqi;
+    padding: 0.2em;
+
+    + & {
+      inset: 1cqb auto auto 10cqi;
+
+      + & {
+        inset: -1cqb auto auto 25cqi;
+      }
+    }
 
     select {
       inset: 0;
       position: absolute;
     }
 
+    .avatar {
+      border-radius: var(--bubble-shape);
+    }
+
     @media (hover: hover) {
       .windshield .bubble:hover & {
-        transform: translate(1rem, 0);
+        transform: translate(1rem, -1rem);
+      }
+
+      .windshield .bubble:hover & + & {
+        transform: translate(1rem, -1rem);
+      }
+
+      .windshield .bubble:hover & + & + & {
+        transform: translate(1.5rem, -0.5rem);;
       }
     }
   }
@@ -172,16 +192,6 @@
     }
   }
 
-  &.bubble__color {
-    cursor: pointer;
-    inset: 8cqb auto auto 0.5cqi;
-    padding: 0.4em;
-
-    .windshield & {
-      display: none;
-    }
-  }
-
   &.bubble__date {
     aspect-ratio: 1;
     cursor: pointer;

app/views/bubbles/_assignments.html.erb

@@ -1,18 +1,8 @@
-<% if bubble.assignments.any? %>
+<% bubble.assignments.each do |assignment| %>
   <div class="bubble__bubble bubble__meta bubble__assignee">
     <%= form_with url: bucket_bubble_assignments_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
-      <label class="btn btn--plain position-relative fill-transparent" style="<%= "--btn-icon-size: 2em;" unless bubble.assignees.any? %>">
-        <% if bubble.assignees.any? %>
-          <% if bubble.assignees.many? %>
-            <div class="avatar__group">
-              <% bubble.assignees.each do |assignee| %>
-                <%= avatar_image_tag assignee, loading: :lazy, class: "avatar flex-item-no-shrink" %>
-              <% end %>
-            </div>
-          <% else %>
-            <%= avatar_image_tag bubble.assignees.first, loading: :lazy, class: "avatar flex-item-no-shrink" %>
-          <% end %>
-        <% end %>
+      <label class="btn btn--plain position-relative fill-transparent">
+        <%= avatar_image_tag assignment.assignee, loading: :lazy, class: "avatar flex-item-no-shrink" %>
 
         <%= form.collection_select :assignee_id, bubble.bucket.users.active, :id, :name, { prompt: "Assign to…", selected: bubble.assignees.pluck(:id) },
               class: "input input--hidden txt-medium",