Inline unread indicator so it aligns reliably

app/assets/stylesheets/cards.css

@@ -344,13 +344,18 @@
       --card-color: var(--color-card-complete) !important;
     }
 
+    .card__body {
+      padding-block-end: 0;
+    }
+
     .card__collection {
       font-size: var(--text-xx-small);
       padding-block: 0.5ch;
     }
 
-    .card__body {
-      padding-block-end: 0;
+    .card__header {
+      margin-inline: calc(-1 * var(--card-padding-inline)) calc(-1 * var(--inline-space-half));
+      max-inline-size: unset;
     }
 
     .card__notification-body {
@@ -378,8 +383,7 @@
     --btn-size: 1.25em;
     --hover-size: 0;
 
-    inset: 0 0 auto auto;
-    position: absolute;
+    position: relative;
     z-index: 1;
 
     &:before,

app/assets/stylesheets/notifications.css

@@ -13,6 +13,14 @@
       }
     }
 
+    .card__header {
+      column-gap: var(--inline-space-half);
+    }
+
+    .card__notification-unread-indicator {
+      font-size: var(--text-small);
+    }
+
     &:has(.card--notification) {
       .notifications-list__empty-message {
         display: none;

app/helpers/notifications_helper.rb

@@ -28,7 +28,6 @@ module NotificationsHelper
           style: { "--card-color:": notification.card.color },
           &)
       )
-      concat(notification_mark_read_button(notification))
     end
   end
 

app/views/notifications/notification/event/_header.html.erb

@@ -12,3 +12,7 @@
 <div class="card__notification-meta overflow-ellipsis flex-item-no-shrink">
   <span class="card__timestamp"><%= local_datetime_tag(notification.created_at) %></span>
 </div>
+
+<div class="card__notification-meta flex-item-no-shrink">
+  <%= notification_mark_read_button(notification) %>
+</div>

app/views/notifications/notification/mention/_header.html.erb

@@ -13,3 +13,7 @@
   <span class="card__timestamp"><%= local_datetime_tag(notification.created_at) %></span>
 </div>
 
+<div class="card__notification-meta flex-item-no-shrink">
+  <%= notification_mark_read_button(notification) %>
+</div>
+