Label every 1h gridline on both sleep charts

Instead of thinning labels on dense axes, keep them all and drop the
label font to 7px past 12 steps (bars) / 16 steps (trend).

src/app.js

@@ -980,18 +980,16 @@
     const gap = days.length > 14 ? 2 : 4;
     const barW = (innerW - (days.length - 1) * gap) / days.length;
 
-    // Every gridline gets a label unless that would crowd the 9px text
+    // Label every 1h gridline; smaller text once the axis is dense so the
-    // (this chart's plot area is shorter than the trend chart's).
+    // labels stay apart (this chart's plot area is shorter than the trend's).
-    const labelEvery = ySteps > 12 ? 2 : 1;
+    const yLabelCls = ySteps > 12 ? "y-dense" : "";
     const parts = [];
     for (let i = 0; i <= ySteps; i++) {
       const y = MT + innerH * (1 - i / ySteps);
       const v = Math.round(yMax * i / ySteps * 10) / 10;
       const vText = v % 1 === 0 ? v : v.toFixed(1);
       parts.push(`<line class="grid" x1="${ML}" y1="${y}" x2="${W - MR}" y2="${y}"/>`);
-      if (i % labelEvery === 0) {
+      parts.push(`<text class="${yLabelCls}" x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
-        parts.push(`<text x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
-      }
     }
 
     const selYmd = ymd(selectedDay());
@@ -1368,17 +1366,16 @@
     const xOf = (hour) => ML + (hour / 24) * innerW;
     const yOf = (v) => MT + innerH * (1 - v / yMax);
 
-    // Every gridline gets a label unless that would crowd the 9px text.
+    // Label every 1h gridline; smaller text once the axis is dense so the
-    const labelEvery = ySteps > 16 ? 2 : 1;
+    // labels stay apart.
+    const yLabelCls = ySteps > 16 ? "y-dense" : "";
     const parts = [];
     for (let i = 0; i <= ySteps; i++) {
       const y = MT + innerH * (1 - i / ySteps);
       const v = Math.round(yMax * i / ySteps * 10) / 10;
       const vText = v % 1 === 0 ? v : v.toFixed(1);
       parts.push(`<line class="grid" x1="${ML}" y1="${y}" x2="${W - MR}" y2="${y}"/>`);
-      if (i % labelEvery === 0) {
+      parts.push(`<text class="${yLabelCls}" x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
-        parts.push(`<text x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
-      }
     }
     for (const hr of [0, 6, 12, 18, 24]) {
       const x = xOf(hr);

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "date": "2026-07-15", "text": "Every 1-hour gridline on the sleep charts now shows its hour mark" },
   { "date": "2026-07-15", "text": "The Sleep chart in the last-N-days card now has 1-hour gridlines too" },
   { "date": "2026-07-15", "text": "The Sleep trend chart is taller with 1-hour gridlines, so nearby lines are easier to tell apart" },
   { "date": "2026-07-15", "text": "The Sleep trend legend shows the hours for each line — Today, Yesterday and the average, next to the projection" },

src/style.css

@@ -597,6 +597,8 @@ dialog menu {
 }
 .chart-svg { display: block; width: 100%; height: auto; }
 .chart-svg text { fill: var(--muted); font-size: 9px; }
+/* Dense 1h y-axes: smaller labels so every gridline can carry one. */
+.chart-svg text.y-dense { font-size: 7px; }
 .chart-svg .grid {
   stroke: var(--border);
   stroke-dasharray: 2 3;