Show min/max y-axis values on each profile chart

Plain HTML overlays, not SVG text: the chart's viewBox scales width
and height independently (preserveAspectRatio="none", for a
responsive width at a fixed pixel height), so text drawn inside that
coordinate space would get stretched by the mismatched factor.

public/css/style.css

@@ -578,9 +578,14 @@ html, body {
   font-weight: normal;
 }
 
+.profile-chart__plot {
+  position: relative;
+}
+
 .profile-chart__svg {
   display: block;
   width: 100%;
+  height: 100%;
   cursor: crosshair;
 }
 
@@ -590,6 +595,30 @@ html, body {
   vector-effect: non-scaling-stroke;
 }
 
+/* Overlaid as plain HTML, not SVG text: the chart's viewBox scales width
+   and height independently (preserveAspectRatio="none", so the line fills
+   a responsive width at a fixed pixel height) — text drawn inside that
+   coordinate space would get stretched by the same mismatched factor. */
+.profile-chart__axis-value {
+  position: absolute;
+  left: 4px;
+  color: #898781;
+  font-size: 10px;
+  line-height: 1;
+  background: rgba(252, 252, 251, 0.75);
+  padding: 1px 3px;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.profile-chart__axis-value--max {
+  top: 2px;
+}
+
+.profile-chart__axis-value--min {
+  bottom: 2px;
+}
+
 .profile-panel__tooltip {
   position: absolute;
   top: 0;

public/js/track_profile.js

@@ -92,12 +92,16 @@ export class TrackProfilePanel {
     wrapper.className = "profile-chart";
     wrapper.innerHTML = `
       <div class="profile-chart__label">${escapeHtml(series.label)} <span class="profile-chart__unit">(${escapeHtml(series.unit)})</span></div>
-      <svg viewBox="0 0 ${VIEWBOX_WIDTH} ${series.height}" preserveAspectRatio="none" class="profile-chart__svg" style="height:${series.height}px">
+      <div class="profile-chart__plot" style="height:${series.height}px">
+        <svg viewBox="0 0 ${VIEWBOX_WIDTH} ${series.height}" preserveAspectRatio="none" class="profile-chart__svg">
           ${areaPath ? `<path d="${areaPath}" fill="${series.color}" fill-opacity="0.15" stroke="none"></path>` : ""}
           <path d="${linePath}" fill="none" stroke="${series.color}" stroke-width="2" vector-effect="non-scaling-stroke"></path>
           <line class="profile-chart__crosshair" x1="0" x2="0" y1="0" y2="${series.height}" hidden></line>
           <circle class="profile-chart__dot" r="4" fill="${series.color}" stroke="#fff" stroke-width="1.5" hidden></circle>
         </svg>
+        <span class="profile-chart__axis-value profile-chart__axis-value--max">${formatValue(max, series)}</span>
+        <span class="profile-chart__axis-value profile-chart__axis-value--min">${formatValue(min, series)}</span>
+      </div>
     `;
     wrapper.dataset.min = min;
     wrapper.dataset.max = max;