Don't scroll to the history when a chart day is tapped

Selecting the day (and the new selected-day highlight) is enough;
the scroll jump lost your place in the charts.

src/app.js

@@ -803,6 +803,9 @@
       const noteEl = li.querySelector(".note");
       if (ev.type === "weight" && Number.isFinite(ev.weight)) {
         noteEl.textContent = ev.note ? `${formatWeight(ev.weight)} · ${ev.note}` : formatWeight(ev.weight);
+      } else if (ev.type === "eat" && Number.isFinite(ev.grams) && ev.grams > 0) {
+        const g = `${Math.round(ev.grams)} g`;
+        noteEl.textContent = ev.note ? `${g} · ${ev.note}` : g;
       } else {
         noteEl.textContent = ev.note || "";
       }
@@ -961,8 +964,6 @@
       b.addEventListener("click", () => {
         dayPicker.value = b.dataset.day;
         render();
-        const hist = document.querySelector(".history");
-        if (hist) hist.scrollIntoView({ behavior: "smooth", block: "start" });
       });
     });
   }
@@ -980,18 +981,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
-    // (this chart's plot area is shorter than the trend chart's).
-    const labelEvery = ySteps > 12 ? 2 : 1;
+    // Label every 1h gridline; smaller text once the axis is dense so the
+    // labels stay apart (this chart's plot area is shorter than the trend's).
+    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 x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
-      }
+      parts.push(`<text class="${yLabelCls}" x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
     }
 
     const selYmd = ymd(selectedDay());
@@ -1368,17 +1367,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.
-    const labelEvery = ySteps > 16 ? 2 : 1;
+    // Label every 1h gridline; smaller text once the axis is dense so the
+    // 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 x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
-      }
+      parts.push(`<text class="${yLabelCls}" 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,7 @@
 [
+  { "date": "2026-07-15", "text": "Tapping a day in a chart selects it without jumping down to the history" },
+  { "date": "2026-07-15", "text": "Meals with an amount logged show their grams in the day's history" },
+  { "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;