From 608ba5cc6f4d2d87a98ea650b3c0776844df35b1 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 14:48:01 -0400
Subject: [PATCH] improve x and y position

---
 frontend/src/components/Preview.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index 5e0c759..eabad4e 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -53,9 +53,20 @@ function Preview({ code, device }: Props) {
     // Highlight the selected element
     updateHighlight(targetElement);
 
-    // Show popup at click position
+    // Show popup at click position, slightly offset to be right under the cursor
     setPopupVisible(false);
-    setPopupPosition({ x: clientX, y: clientY });
+
+    // Calculate offsets
+    const rect = iframeRef.current?.getBoundingClientRect();
+    const offsetX = rect ? rect.left : 0;
+    const offsetY = rect ? rect.top : 0;
+
+    // Adjust for scale
+    const scale = 1; // the scale factor applied to the iframe
+    const scaledX = clientX / scale + offsetX;
+    const scaledY = clientY / scale + offsetY;
+
+    setPopupPosition({ x: scaledX, y: scaledY });
     setPopupVisible(true);
   }