From ce3d928f7757427a4b072f4cb596c529e3fab0a2 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 22 Jun 2026 22:32:05 -0700
Subject: [PATCH] Keep heatmap depth labels readable while scaling overlay

---
 .../[websiteId]/(reports)/heatmaps/Heatmap.module.css     | 4 ++++
 .../websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx   | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css
index 84dd40f35..8d3eb5bc0 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css
+++ b/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 {
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
index 4c0d782ed..7eef4d20f 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
+++ b/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>