From 3109273c24db85fc830ef0f74ccc9c91081d9b1c Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Sat, 6 Sep 2025 13:18:10 +0530
Subject: [PATCH 1/2] Fix on hover show popup

---
 apps/roam/src/utils/renderNodeTagPopup.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/roam/src/utils/renderNodeTagPopup.tsx b/apps/roam/src/utils/renderNodeTagPopup.tsx
index 943a1327a..f25ded28c 100644
--- a/apps/roam/src/utils/renderNodeTagPopup.tsx
+++ b/apps/roam/src/utils/renderNodeTagPopup.tsx
@@ -49,6 +49,8 @@ export const renderNodeTagPopupButton = (
   const rawBlockText = blockUid ? getTextByBlockUid(blockUid) : "";
   const cleanedBlockText = rawBlockText.replace(textContent, "").trim();
 
+  const rect = parent.getBoundingClientRect();
+
   ReactDOM.render(
     <Popover
       content={
@@ -71,8 +73,8 @@ export const renderNodeTagPopupButton = (
         <span
           style={{
             display: "block",
-            width: "100%",
-            height: "100%",
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
             pointerEvents: "auto",
           }}
         />

From cdbda8ab9b36b378b6b5a425d40bcae048bd9230 Mon Sep 17 00:00:00 2001
From: Siddharth Yadav <sid597athens@gmail.com>
Date: Sun, 7 Sep 2025 10:07:17 +0530
Subject: [PATCH 2/2] Fix roam studio and node tag popup (#421)

---
 apps/roam/src/utils/renderNodeTagPopup.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/roam/src/utils/renderNodeTagPopup.tsx b/apps/roam/src/utils/renderNodeTagPopup.tsx
index f25ded28c..df6ffc74b 100644
--- a/apps/roam/src/utils/renderNodeTagPopup.tsx
+++ b/apps/roam/src/utils/renderNodeTagPopup.tsx
@@ -14,6 +14,7 @@ export const renderNodeTagPopupButton = (
 ) => {
   if (parent.dataset.attributeButtonRendered === "true") return;
 
+  const rect = parent.getBoundingClientRect();
   parent.dataset.attributeButtonRendered = "true";
   const wrapper = document.createElement("span");
   wrapper.style.position = "relative";
@@ -25,8 +26,8 @@ export const renderNodeTagPopupButton = (
   reactRoot.style.position = "absolute";
   reactRoot.style.top = "0";
   reactRoot.style.left = "0";
-  reactRoot.style.width = "100%";
-  reactRoot.style.height = "100%";
+  reactRoot.style.width = `${rect.width}px`;
+  reactRoot.style.height = `${rect.height}px`;
   reactRoot.style.pointerEvents = "none";
   reactRoot.style.zIndex = "10";
 
@@ -49,8 +50,6 @@ export const renderNodeTagPopupButton = (
   const rawBlockText = blockUid ? getTextByBlockUid(blockUid) : "";
   const cleanedBlockText = rawBlockText.replace(textContent, "").trim();
 
-  const rect = parent.getBoundingClientRect();
-
   ReactDOM.render(
     <Popover
       content={
@@ -73,8 +72,11 @@ export const renderNodeTagPopupButton = (
         <span
           style={{
             display: "block",
+            top: "0",
+            left: "0",
             width: `${rect.width}px`,
             height: `${rect.height}px`,
+            position: "absolute",
             pointerEvents: "auto",
           }}
         />
@@ -83,7 +85,7 @@ export const renderNodeTagPopupButton = (
       position={Position.TOP}
       modifiers={{
         offset: {
-          offset: "0, 10",
+          offset: `${rect.width / 2}px, 10`,
         },
         arrow: {
           enabled: false,