Stack the notification timestamp time-over-date instead of a relative string

"1 hour, 20 minutes ago" ran long and ate into the body text's width now
that it's no longer truncated -- a compact two-line HH:MM/date column
(same shape as the calendar row's own day/date marker) fixes that.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9

mobile/templates/mobile/_notification_row.html

@@ -9,7 +9,11 @@
     NotificationsView.post). A club-coloured bar marks it unread -- full
     height via self-stretch, same technique as mobile/_calendar_row.html's
     own kind marker, so it still spans the row now that the body text below
-    is shown in full (no truncatechars) and can wrap to several lines.
+    is shown in full (no truncatechars) and can wrap to several lines. The
+    timestamp is stacked time-over-date (like _calendar_row.html's own
+    day/date column) rather than a relative "X ago" string -- that can run
+    long ("1 hour, 20 minutes ago") and eats into the body text's width now
+    that it's no longer truncated.
 {% endcomment %}
 <form method="post" action="{% url "mobile:notifications" %}" hx-boost="false">
     {% csrf_token %}
@@ -22,6 +26,9 @@
             <span class="block text-xs text-muted">{{ row.notification.body }}</span>
             {% if row.source_label %}<span class="block font-display text-[11px] font-extrabold text-club uppercase tracking-wide">{{ row.source_label }}</span>{% endif %}
         </span>
-        <span class="shrink-0 font-mono text-[11px] text-dim">{% blocktrans with time=row.notification.created|timesince %}{{ time }} ago{% endblocktrans %}</span>
+        <span class="w-11 shrink-0 text-right">
+            <span class="block font-mono text-[11px] text-dim">{{ row.notification.created|date:"H:i" }}</span>
+            <span class="block font-mono text-[10px] text-dim">{{ row.notification.created|date:"d M" }}</span>
+        </span>
     </button>
 </form>

static/css/app.css

@@ -3932,6 +3932,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -4205,6 +4208,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-\[3\] {
+    flex: 3;
+  }
   .flex-shrink {
     flex-shrink: 1;
   }