Use card header in events

app/assets/stylesheets/events.css

@@ -131,16 +131,23 @@
     --column-gap: 0.7ch;
     --panel-border-color: transparent;
     --panel-border-radius: 0.2em;
-    --panel-padding: 0.6em 1.2em 0.6em 0.6em;
+    --panel-padding: 0.6em;
     --panel-size: auto;
 
     margin: var(--inline-space);
+    overflow: clip;
     position: relative;
-    /* z-index: 1; */
 
     @media (max-width: 639px) {
       --panel-size: 100%;
     }
+
+    .card__collection {
+      border-end-end-radius: 0.3em;
+      font-size: var(--text-xx-small);
+      margin: -1.2em auto 0.8em -1.2em;
+      padding-block: 0.6em;
+    }
   }
 
   .event--golden {
@@ -194,6 +201,22 @@
     text-transform: uppercase;
   }
 
+  .event__icon {
+    background-color: var(--card-color);
+    border-end-start-radius: 0.3em;
+    display: grid;
+    font-size: var(--text-xx-small);
+    margin: -1.2em -1.2em 0.8em auto;
+    padding: 0.6em 0.9em 0.6em 0.7em;
+    place-content: center;
+
+    .icon {
+      block-size: 1.4em;
+      inline-size: 1.4em;
+      grid-area: 1 / 1;
+    }
+  }
+
   .event__timestamp {
     align-self: start;
     display: grid;
@@ -207,21 +230,4 @@
     font-size: 1.1em;
     line-height: 1.2;
   }
-
-  .event__icon {
-    aspect-ratio: 1;
-    background-color: var(--card-color);
-    block-size: 1.7em;
-    border-radius: 1.7em;
-    inline-size: 1.7em;
-    display: grid;
-    place-content: center;
-    margin-inline-end: -0.75em;
-
-    .icon {
-      block-size: 1.1em;
-      inline-size: 1.1em;
-      grid-area: 1 / 1;
-    }
-  }
 }

app/views/events/event/_layout.html.erb

@@ -1,19 +1,18 @@
 <%= link_to event.notifiable_target,
-      class: "event event--#{ event.action } #{ "event--golden" if event.card.golden? && card.doing? } panel center center-block flex-inline align-start justify-start gap position-relative",
+      class: "event event--#{ event.action } #{ "event--golden" if event.card.golden? && card.doing? } panel center center-block flex-inline align-start justify-start position-relative",
       style: "--card-color: #{ card.closed? ? "var(--color-card-complete)" : card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
   color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); border: 1px solid color-mix(in srgb, var(--card-color) 20%, var(--color-canvas))",
       data: { related_element_target: "related",
             related_element_group_value: card.id,
             action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
-  <div class="avatar txt-x-small flex-item-no-shrink">
-    <%= avatar_image_tag(event.creator) %>
-  </div>
-
-  <div class="flex flex-column min-width txt-small align-start txt-align-start" style="color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));">
-    <div class="flex align-start gap full-width">
-      <strong class="event__title txt-break overflow-line-clamp txt-tight-lines">
-        <%= event_action_sentence(event) %>
-      </strong>
+  <div class="flex flex-column">
+    <div class="flex align-start gap">
+      <div class="card__collection flex-inline align-start">
+        <span class="card__id"><%= card.id %></span>
+        <span class="card__collection-name">
+          <span class="overflow-ellipsis"><%= event.collection.name %></span>
+        </span>
+      </div>
 
       <% if event_column(event) == 2 %>
         <span class="event__icon flex-item-justify-end txt-reversed">
@@ -22,8 +21,18 @@
       <% end %>
     </div>
 
-    <%= yield %>
+    <div class="flex align-start gap">
+      <div class="avatar txt-x-small flex-item-no-shrink">
+        <%= avatar_image_tag(event.creator) %>
+      </div>
 
-    <span class="event__collection"><span><%= card.id %></span> · <%= event.collection.name %></span>
+      <div class="flex flex-column min-width txt-small align-start txt-align-start" style="color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));">
+        <strong class="event__title txt-break overflow-line-clamp txt-tight-lines">
+          <%= event_action_sentence(event) %>
+        </strong>
+
+        <%= yield %>
+      </div>
+    </div>
   </div>
 <% end %>