From 36be7d0a02836e10739fdc9881effca59c6a47fa Mon Sep 17 00:00:00 2001
From: Josue Zamudio <josuezamudio1@gmail.com>
Date: Wed, 26 Aug 2026 19:18:39 +0000
Subject: [PATCH] Stats: fix month-label placement, back to orange
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- labels now sit on the week CONTAINING the 1st of the month (old
  logic labelled the first column starting in that month, so a month
  beginning mid-week was labelled a whole column late — hovering the
  cells under 'Aug' showed Jul dates); skip labels that would crowd
  the previous one
- label + grid rows are inline-flex so flexbox shrink can't drift
  them apart at narrow widths
- cell scale back to the orange accent (color-mix of --acc)
---
 static/app.js    | 15 +++++++++------
 static/style.css | 16 ++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/static/app.js b/static/app.js
index 3a4d178..3cae04b 100644
--- a/static/app.js
+++ b/static/app.js
@@ -491,15 +491,17 @@ function heatMap(byDay, days) {
   for (const t of ["Mon", "", "Wed", "", "Fri", "", ""]) dcol.append(el("span", null, t));
   const row = el("div", "heat-row");
   row.append(dcol, grid);
-  let lastM = -1;
+  let lastCol = -10, colIdx = 0;  // month label: week containing the 1st
   for (let d = new Date(start); d <= today; ) {
     const col = el("div", "heat-col");
     const lab = el("span", "heat-lab");
-    const labD = new Date(d);
-    for (let i = 0; i < 7 && labD < win; i++) labD.setDate(labD.getDate() + 1);
-    if (labD <= today && labD.getMonth() !== lastM) {
-      lab.textContent = MN[labD.getMonth()];
-      lastM = labD.getMonth();
+    for (let i = 0; i < 7; i++) {
+      const dd = new Date(d); dd.setDate(dd.getDate() + i);
+      if (dd.getDate() === 1 && dd >= win && dd <= today && colIdx - lastCol >= 2) {
+        lab.textContent = MN[dd.getMonth()];
+        lastCol = colIdx;
+        break;  // one label per column, skip if it would crowd the previous
+      }
     }
     lbl.append(lab);
     for (let i = 0; i < 7; i++) {
@@ -518,6 +520,7 @@ function heatMap(byDay, days) {
       col.append(c);
     }
     grid.append(col);
+    colIdx++;
   }
   const lg = el("div", "heat-lg");
   lg.append(el("span", "muted", "less"));
diff --git a/static/style.css b/static/style.css
index fd99004..5855116 100644
--- a/static/style.css
+++ b/static/style.css
@@ -58,21 +58,21 @@ h2 { margin: 0.4rem 0; }
 .stat-value { font-size: 1.3rem; font-weight: 700; }
 .heat-wrap { overflow-x: auto; margin: .5rem 0 .3rem; background: var(--card);
   border: 1px solid var(--bd); border-radius: 10px; padding: .7rem .8rem .5rem; }
-.heat-lbl { display: flex; gap: 3px; margin-bottom: 2px; height: 12px; margin-left: 32px; }
+.heat-lbl { display: inline-flex; gap: 3px; margin-bottom: 2px; height: 12px; margin-left: 32px; }
 .heat-lbl .heat-lab { width: 11px; min-width: 0; font-size: .65rem;
   color: var(--muted); white-space: nowrap; }
-.heat-row { display: flex; }
-.heat-days { display: flex; flex-direction: column; gap: 3px; margin-right: 6px; }
+.heat-row { display: inline-flex; }
+.heat-days { display: flex; flex-direction: column; gap: 3px; margin-right: 6px; flex: none; }
 .heat-days span { width: 26px; height: 11px; line-height: 11px; text-align: right;
   font-size: .65rem; color: var(--muted); }
-.heat { display: flex; gap: 3px; }
+.heat { display: flex; gap: 3px; flex: none; }
 .heat-col { display: flex; flex-direction: column; gap: 3px; }
 .heat i, .heat-lg i { width: 11px; height: 11px; border-radius: 2px; background: var(--bd); }
 .heat i.none { background: transparent; }
-.heat i.l1, .heat-lg i.l1 { background: #0e4429; }
-.heat i.l2, .heat-lg i.l2 { background: #006d32; }
-.heat i.l3, .heat-lg i.l3 { background: #26a641; }
-.heat i.l4, .heat-lg i.l4 { background: #39d353; }
+.heat i.l1, .heat-lg i.l1 { background: color-mix(in srgb, var(--acc) 30%, var(--bd)); }
+.heat i.l2, .heat-lg i.l2 { background: color-mix(in srgb, var(--acc) 55%, var(--bd)); }
+.heat i.l3, .heat-lg i.l3 { background: color-mix(in srgb, var(--acc) 78%, var(--bd)); }
+.heat i.l4, .heat-lg i.l4 { background: var(--acc); }
 .heat-lg { display: flex; align-items: center; justify-content: flex-end; gap: 3px;
   font-size: .75rem; color: var(--muted); margin-top: .5rem; }
 .chip { font-size: .7rem; padding: .1rem .5rem; border-radius: 99px; border: 1px solid var(--bd);