Merge pull request #2435 from basecamp/card-header-alignment

Card header alignment

Author: andyra

app/assets/images/person.svg

@@ -62,6 +62,8 @@
   }
 
   .card__board {
+    align-items: center;
+    align-self: start;
     background-color: var(--card-color);
     border-radius: var(--border-radius) 0 var(--border-radius) 0;
     color: var(--color-ink-inverted);

app/assets/stylesheets/cards.css

@@ -287,6 +287,7 @@
 
   .event {
     --column-gap: 0.7ch;
+    --event-padding: 0.6em;
 
     background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
     border-radius: 0.2em;
@@ -296,7 +297,7 @@
     max-inline-size: 100%;
     min-inline-size: 0;
     overflow: clip;
-    padding: 0.6em;
+    padding: var(--event-padding);
     position: relative;
     z-index: 0;
 
@@ -321,12 +322,15 @@
       z-index: 0;
     }
 
+    .card__header {
+      inline-size: 100%;
+      margin-block-start: calc(-1 * var(--event-padding));
+    }
+
     .card__board {
       background-color: transparent;
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
       font-size: 0.7em;
-      padding: 0;
-      translate: 0 -0.3em;
     }
 
     .card__board-name {
@@ -373,16 +377,11 @@
   }
 
   .event__icon {
+    color: var(--card-color);
     display: grid;
-    margin: -0.3em -0.3em auto auto;
+    margin-inline-start: auto;
     place-content: center;
-
-    .icon {
-      background-color: var(--card-color);
-      block-size: 1em;
-      inline-size: 1em;
-      grid-area: 1 / 1;
-    }
+    translate: calc(var(--event-padding) / 2);
   }
 
   .event__timestamp {

app/assets/stylesheets/events.css

@@ -1,5 +1,5 @@
 <% cache event do %>
-  <%# Helper Dependency Updated: avatar_image_tag 2025-12-15 %>
+  <%# Template Dependency Updated: _layout.html.erb 2026-01-26 %>
   <% if lookup_context.exists?("events/event/eventable/_#{event.action}") %>
     <%= render "events/event/eventable/#{event.action}", event: event %>
   <% else %>

app/views/events/_event.html.erb

@@ -1,4 +1,5 @@
 <% cache [ day_timeline.events ] do %>
+  <%# Template Dependency Updated: _layout.html.erb 2026-01-26 %>
   <% if day_timeline.has_activity? %>
     <div class="events__columns">
       <%= render "events/day_timeline/column", column: day_timeline.added_column %>

app/views/events/day_timeline/_columns.html.erb

@@ -7,8 +7,8 @@
         related_element_target: "related",
         related_element_group_value: card.id,
         action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
-  <div class="card__header flex align-start gap full-width">
-    <h4 class="card__board flex-inline align-start">
+  <div class="card__header">
+    <h4 class="card__board">
       <span class="card__id">
         <span class="for-screen-reader">Card number</span>
         <%= card.number %>
@@ -19,9 +19,7 @@
     </h4>
 
     <% unless event.action.in?(%w[ card_closed card_published card_reopened ]) %>
-      <span class="event__icon flex-item-justify-end txt-reversed">
-        <%= icon_tag event_action_icon(event) %>
-      </span>
+      <%= icon_tag event_action_icon(event), class: "event__icon" %>
     <% end %>
   </div>
   <div class="event__content">