fix: improve 100vh heatmap iframe alignment

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;

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}