From e7bd09418b41741dfb7015dd8806699d2732de11 Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Sat, 28 Mar 2026 01:44:59 +0000
Subject: [PATCH] fix: update session calendar layout and improve session
 labels for clarity

---
 .../partials/projects/sessions_calendar.html  | 36 +++++++------------
 templates/projects/detail.html                |  1 +
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/templates/partials/projects/sessions_calendar.html b/templates/partials/projects/sessions_calendar.html
index a225b9b..fc29eea 100644
--- a/templates/partials/projects/sessions_calendar.html
+++ b/templates/partials/projects/sessions_calendar.html
@@ -1,5 +1,5 @@
 <!-- Monthly Sessions Calendar — Gantt Style -->
-<div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+<div class="sessions-cal-wrap bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
 
     <!-- Month navigation -->
     <div class="px-5 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
@@ -79,40 +79,29 @@
             {% if day.sessions %}
             <div class="space-y-2">
                 {% for s in day.sessions %}
-                {% set tooltip %}{{ s.label }} · Device {{ s.dev_start_label }}–{{ s.dev_end_label }}{% if s.eff_start_label %} · Window {{ s.eff_start_label }}–{{ s.eff_end_label }}{% endif %}{% endset %}
-                <a href="/api/projects/{{ project_id }}/sessions/{{ s.session_id }}/detail"
-                   class="block group"
-                   title="{{ tooltip }}">
+
+                <a href="/api/projects/{{ project_id }}/sessions/{{ s.session_id }}/detail" class="block">
 
                     <!-- 24-hour timeline bar -->
-                    <div class="relative w-full rounded-sm overflow-hidden" style="height:11px; background:rgba(128,128,128,0.08);">
-
-                        <!-- Hour guide ticks at 6h, 12h, 18h -->
+                    <div class="relative overflow-hidden -mx-1.5" style="height:11px; background:rgba(128,128,128,0.08);">
                         <div class="absolute top-0 bottom-0 w-px" style="left:25%; background:rgba(128,128,128,0.18)"></div>
                         <div class="absolute top-0 bottom-0 w-px" style="left:50%; background:rgba(128,128,128,0.28)"></div>
                         <div class="absolute top-0 bottom-0 w-px" style="left:75%; background:rgba(128,128,128,0.18)"></div>
-
-                        <!-- Device on/off bar (dim) -->
-                        <div class="absolute top-0 bottom-0 rounded-sm"
-                             style="left:{{ s.dev_start_pct }}%; width:{{ s.dev_width_pct }}%; background-color:{{ s.color }}; opacity:0.28;">
-                        </div>
-
-                        <!-- Effective window (solid, slightly inset) -->
+                        <div class="absolute top-0 bottom-0"
+                             style="left:{{ s.dev_start_pct }}%; width:{{ s.dev_width_pct }}%; background-color:{{ s.color }}; opacity:0.28;"></div>
                         {% if s.eff_start_pct is not none %}
-                        <div class="absolute rounded-sm group-hover:brightness-110 transition-all"
-                             style="left:{{ s.eff_start_pct }}%; width:{{ s.eff_width_pct }}%; top:1.5px; bottom:1.5px; background-color:{{ s.color }};">
-                        </div>
+                        <div class="absolute"
+                             style="left:{{ s.eff_start_pct }}%; width:{{ s.eff_width_pct }}%; top:1.5px; bottom:1.5px; background-color:{{ s.color }};"></div>
                         {% endif %}
-
                     </div>
 
-                    <!-- Location micro-label -->
-                    <div class="truncate mt-0.5 group-hover:opacity-70 transition-opacity"
-                         style="color:{{ s.color }}; font-size:0.58rem; line-height:1.3;">
-                        {{ s.location_name }}{% if s.period_type %} <span class="opacity-60">{{ '☀' if 'day' in s.period_type else '☾' }}</span>{% endif %}
+                    <!-- Label -->
+                    <div class="truncate mt-0.5" style="color:{{ s.color }}; font-size:0.58rem; line-height:1.3;">
+                        {{ s.location_name }} · {{ day.date.strftime('%-m/%-d') }} · {% if s.period_type %}{{ 'Night' if 'night' in s.period_type else 'Day' }}{% else %}—{% endif %}
                     </div>
 
                 </a>
+
                 {% endfor %}
             </div>
             {% endif %}
@@ -132,3 +121,4 @@
     </div>
 
 </div>
+
diff --git a/templates/projects/detail.html b/templates/projects/detail.html
index 26f2200..e3131dc 100644
--- a/templates/projects/detail.html
+++ b/templates/projects/detail.html
@@ -1842,5 +1842,6 @@ document.addEventListener('DOMContentLoaded', function() {
         switchTab(hash);
     }
 });
+
 </script>
 {% endblock %}