From a35535de7c136f2c893a3edce5aa66e159bc8ff3 Mon Sep 17 00:00:00 2001
From: Bernard Siebens <bernard@siebens.org>
Date: Fri, 21 Aug 2026 20:41:42 +0200
Subject: [PATCH] Give the calendar row a single kind-marker bar and a
 dedicated location line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Games previously got a 4px left border while training/other events used a
3px bar next to the date — move games onto the same bar for one consistent
marker position. Also break the location name out of the crowded meta line
into its own row so it doesn't get truncated away.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
---
 mobile/templates/mobile/_calendar_row.html | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/mobile/templates/mobile/_calendar_row.html b/mobile/templates/mobile/_calendar_row.html
index fcc7af7..d53a8d9 100644
--- a/mobile/templates/mobile/_calendar_row.html
+++ b/mobile/templates/mobile/_calendar_row.html
@@ -1,27 +1,26 @@
 {% load i18n %}
 {% comment %}
     One M3 agenda row -- included from calendar.html once per bucket. Expects
-    ``row`` ({event, pill_class, pill_label}) in scope. A 4px club-red left
-    border marks games; other kinds get a 3px colour bar (info for training,
-    warn for everything else) next to the date, per the design doc's M3 row
-    description.
+    ``row`` ({event, pill_class, pill_label}) in scope. A 3px colour bar next
+    to the date marks the event kind: club-red for games, info-blue for
+    training, warn-amber for everything else -- one consistent marker
+    position for every kind, rather than games getting a different
+    treatment (a left border on the whole row) from the rest.
 {% endcomment %}
-<a class="flex items-center gap-3 bg-white px-4 py-3 {% if row.event.kind == "game" %}border-l-4 border-club{% endif %}" href="{% url "mobile:event_detail" row.event.pk %}">
+<a class="flex items-center gap-3 bg-white px-4 py-3" href="{% url "mobile:event_detail" row.event.pk %}">
     <div class="w-9.5 shrink-0 text-center">
         <div class="font-mono text-[10px] tracking-wide text-muted uppercase">{{ row.event.start|date:"D" }}</div>
         <div class="font-display text-2xl leading-none font-extrabold text-ink">{{ row.event.start|date:"d" }}</div>
     </div>
-    {% if row.event.kind != "game" %}
-        <div class="h-9.5 w-[3px] shrink-0 rounded-full {% if row.event.kind == "training" %}bg-info{% else %}bg-warn{% endif %}"></div>
-    {% endif %}
+    <div class="h-9.5 w-[3px] shrink-0 rounded-full {% if row.event.kind == "game" %}bg-club{% elif row.event.kind == "training" %}bg-info{% else %}bg-warn{% endif %}"></div>
     <div class="min-w-0 flex-1">
         <div class="text-sm font-semibold text-ink">{{ row.event.title }}</div>
         <div class="truncate text-xs text-muted">
             {{ row.event.start|date:"H:i" }}
             {% if row.member %}&middot; {{ row.member.first_name }}{% endif %}
             {% for team in row.event.teams.all %}&middot; {{ team.name }}{% endfor %}
-            {% if row.event.location %}&middot; {{ row.event.location.name }}{% endif %}
         </div>
+        {% if row.event.location %}<div class="truncate text-xs text-muted">{{ row.event.location.name }}</div>{% endif %}
     </div>
     <span class="pill {{ row.pill_class }} shrink-0">{{ row.pill_label }}</span>
 </a>