Keep heatmap depth labels readable while scaling overlay

src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css

@@ -123,6 +123,10 @@
   border-radius: 4px;
   padding: 1px 6px;
   white-space: nowrap;
+  /* Counter-scaled inline via transform: scale(1 / fit.scale). Anchor to the
+     top-right corner (where the band right-aligns it) so it grows inward and
+     stays pinned to the edge instead of drifting off-canvas. */
+  transform-origin: top right;
 }
 
 .canvasWrapper {

src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx

@@ -853,7 +853,13 @@ function ScrollHeatmapView({
                         }}
                         title={`${band.toPct}% depth - ${formatLongNumber(band.reached)} sessions reached`}
                       >
-                        <span className={styles.scrollBandLabel}>
+                        <span
+                          className={styles.scrollBandLabel}
+                          // Counter-scale the label by the inverse of the canvas
+                          // scale so its on-screen size stays constant while the
+                          // bands resize with the rest of the overlay.
+                          style={{ transform: `scale(${1 / fit.scale})` }}
+                        >
                           {band.toPct}% depth - {Math.round(intensity * 100)}% reached
                         </span>
                       </div>