From 0b0a784c76a80ba1cfcf195989b928fbc012b526 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Thu, 2 Jul 2026 09:52:51 -0700
Subject: [PATCH] fix: improve 100vh heatmap iframe alignment

---
 .../(reports)/heatmaps/Heatmap.module.css     |  4 +++-
 .../(reports)/heatmaps/Heatmap.tsx            | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

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 3def7bb9a..350542e16 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css
+++ b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css
@@ -168,7 +168,9 @@
 
 .snapshot {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   z-index: 1;
   transform-origin: top left;
   pointer-events: none;
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
index 9dec06fa7..5a8d703bb 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
@@ -874,6 +874,17 @@ function ScrollHeatmapView({
   );
 }
 
+function getSnapshotFrameHeight(snapshot: HeatmapSnapshot) {
+  const { pageH, viewportH } = snapshot;
+
+  // Use the recorded viewport height for near-single-screen pages so `100vh` matches the visitor's screen.
+  if (pageH <= viewportH * 1.25) {
+    return viewportH;
+  }
+
+  return pageH;
+}
+
 function SnapshotPreview({
   snapshot,
   onReady,
@@ -893,6 +904,7 @@ function IframeSnapshot({
 }) {
   const [available, setAvailable] = useState(true);
   const iframeUrl = snapshot.url;
+  const frameHeight = getSnapshotFrameHeight(snapshot);
 
   useEffect(() => {
     setAvailable(true);
@@ -913,7 +925,12 @@ function IframeSnapshot({
   }
 
   return (
-    <div className={styles.snapshot}>
+    <div
+      className={styles.snapshot}
+      style={{
+        height: Math.max(1, frameHeight),
+      }}
+    >
       <iframe
         className={`${styles.snapshotIframe} rr-block`}
         src={iframeUrl}