fix heatmap months legend

site/src/components/StatsView.svelte

@@ -106,6 +106,10 @@
   const now = new Date();
   const years = [now.getFullYear(), now.getFullYear()-1, now.getFullYear()-2, now.getFullYear()-3];
 
+  function localISO(d: Date): string {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+  }
+
   function getWeeks(year: number): string[][] {
     const jan1 = new Date(year, 0, 1);
     const dec31 = new Date(year, 11, 31);
@@ -118,8 +122,7 @@
     while (cur <= end) {
       const week: string[] = [];
       for (let d = 0; d < 7; d++) {
-        const iso = cur.toISOString().slice(0, 10);
-        week.push(cur.getFullYear() === year ? iso : '');
+        week.push(cur.getFullYear() === year ? localISO(cur) : '');
         cur.setDate(cur.getDate() + 1);
       }
       weeks.push(week);
@@ -130,18 +133,6 @@
   const DOW = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
   const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 
-  function monthLabels(weeks: string[][]): Array<{ month: string; col: number }> {
-    const seen = new Set<string>();
-    return weeks.flatMap((week, i) => {
-      const day = week.find(d => d);
-      if (!day) return [];
-      const m = MONTHS[parseInt(day.slice(5, 7)) - 1];
-      if (seen.has(m)) return [];
-      seen.add(m);
-      return [{ month: m, col: i }];
-    });
-  }
-
   function cellTitle(date: string): string {
     if (!date) return '';
     const sportMap = byDateBySport.get(date);
@@ -205,7 +196,6 @@
 <!-- Heatmaps per year -->
 {#each years as year}
   {@const weeks = getWeeks(year)}
-  {@const labels = monthLabels(weeks)}
   {@const yt = totalsByYear.get(year)}
   {#if yt}
     <div class="mb-8">
@@ -217,31 +207,29 @@
       </div>
 
       <div class="overflow-x-auto">
-        <div class="inline-block">
-          <!-- Month labels -->
-          <div class="flex mb-1 ml-6">
-            {#each labels as { month, col }}
-              <span
-                class="text-xs text-zinc-500 absolute"
-                style="left: calc({col} * 13px)"
-              >{month}</span>
-            {/each}
-            <div style="width:{weeks.length * 13}px" />
-          </div>
-
-          <!-- Grid -->
-          <div class="flex gap-[3px]">
-            <!-- Day-of-week labels -->
+        <div class="inline-flex gap-[3px]">
+          <!-- Day-of-week labels: blank slot at top to align with month row -->
           <div class="flex flex-col gap-[3px] mr-1">
+            <div class="h-4" />
             {#each DOW as d, i}
               <span class="text-[9px] text-zinc-600 h-[10px] leading-[10px] w-3 text-right">
                 {i % 2 === 1 ? d : ''}
               </span>
             {/each}
           </div>
-            <!-- Weeks -->
-            {#each weeks as week}
+          <!-- Week columns: month label at top, day cells below -->
+          {#each weeks as week, wi}
+            {@const firstDay = week.find(d => d)}
+            {@const prevFirstDay = wi > 0 ? weeks[wi - 1].find(d => d) : null}
+            {@const showMonth = firstDay && (!prevFirstDay || prevFirstDay.slice(5, 7) !== firstDay.slice(5, 7))}
             <div class="flex flex-col gap-[3px]">
+              <div class="h-4 relative">
+                {#if showMonth}
+                  <span class="text-[10px] text-zinc-500 absolute left-0 top-0 whitespace-nowrap">
+                    {MONTHS[parseInt(firstDay.slice(5, 7)) - 1]}
+                  </span>
+                {/if}
+              </div>
               {#each week as date}
                 <div
                   class="w-[10px] h-[10px] rounded-[2px]"
@@ -253,7 +241,6 @@
           {/each}
         </div>
       </div>
-      </div>
 
       <!-- Legend -->
       <div class="flex items-center gap-3 mt-2 flex-wrap">