fix: positioning of the info box

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -443,70 +443,99 @@ function RemoteFunctions(config) {
     }
 
     NodeInfoBox.prototype = {
-        create: function() {
-            // Remove existing info box if any
-            this.remove();
+        _style: function() {
+            this.body = window.document.createElement("div");
+
+            // this is shadow DOM.
+            // we need it because if we add the box directly to the DOM then users style might override it.
+            // {mode: "closed"} means that users will not be able to access the shadow DOM
+            const shadow = this.body.attachShadow({ mode: "closed" });
+
+            // the element that was clicked
+            let elemBounds = this.element.getBoundingClientRect();
+
+            // the positions where it should be placed
+            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
             // this value decides where we need to show the box in the UI
             // we are creating this here, because if the element has IDs and Classes then we need to increase the value
             // so that the box doesn't obscure the element
-            let pushBoxUp = 29; // px value
+            let pushBoxUp = 28; // px value
 
             // get the ID and classes for that element, as we need to display it in the box
             const id = this.element.id;
             const classes = this.element.className ? this.element.className.split(/\s+/).filter(Boolean) : [];
 
             let content = ""; // this will hold the main content that will be displayed
-            // add element tag name
-            content += "<div style='font-weight: bold;'>" + this.element.tagName.toLowerCase() + "</div>";
+            content += "<div class='tag-name'>" + this.element.tagName.toLowerCase() + "</div>"; // add element tag name
 
             // Add ID if present
             if (id) {
-                content += "<div style='margin-top: 3px;'>#" + id + "</div>";
-                pushBoxUp += 17;
+                content += "<div class='id-name'>#" + id + "</div>";
+                pushBoxUp += 16;
             }
 
             // Add classes (limit to 3 with dropdown indicator)
             if (classes.length > 0) {
-                content += "<div style='margin-top: 3px;'>";
+                content += "<div class='class-name'>";
                 for (var i = 0; i < Math.min(classes.length, 3); i++) {
                     content += "." + classes[i] + " ";
                 }
                 if (classes.length > 3) {
-                    content += "<span style='opacity: 0.8;'>+" + (classes.length - 3) + " more</span>";
+                    content += "<span class='exceeded-classes'>+" + (classes.length - 3) + " more</span>";
                 }
                 content += "</div>";
-
-                pushBoxUp += 17;
+                pushBoxUp += 16;
             }
 
-            let elemBounds = this.element.getBoundingClientRect();
+            // Now calculate topPos using the final pushBoxUp value
+            const leftPos = elemBounds.left + scrollLeft;
+            const topPos = (elemBounds.top - pushBoxUp < 0
+                ? elemBounds.top + elemBounds.height + 5
+                : elemBounds.top - pushBoxUp) + scrollTop;
+
+            const styles = `
+                .box {
+                    background-color: #4285F4;
+                    color: white;
+                    border-radius: 3px;
+                    padding: 5px 8px;
+                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+                    font-size: 12px;
+                    font-family: Arial, sans-serif;
+                    z-index: 2147483647;
+                    position: absolute;
+                    left: ${leftPos}px;
+                    top: ${topPos}px;
+                    max-width: 300px;
+                    box-sizing: border-box;
+                    pointer-events: none;
+                }
+
+                .tag-name {
+                    font-weight: bold;
+                }
+
+                .id-name,
+                .class-name {
+                    margin-top: 3px;
+                }
+
+                .exceeded-classes {
+                    opacity: 0.8;
+                }
+            `;
+
+            // add everything to the shadow box
+            shadow.innerHTML = `<style>${styles}</style><div class="box">${content}</div>`;
+            this._shadow = shadow;
+        },
+
+        create: function() {
+            this.remove(); // remove existing box if already present
+            this._style(); // style the box
 
-            // create the container
-            this.body = window.document.createElement("div");
-            this.body.style.setProperty("z-index", 2147483647);
-            this.body.style.setProperty("position", "fixed");
-            this.body.style.setProperty("left", elemBounds.left + "px");
-            this.body.style.setProperty(
-                "top",
-                // if there's not enough space to show the box above the element,
-                // we show it below the element
-                (elemBounds.top - pushBoxUp < 0 ? elemBounds.top + elemBounds.height + 5 : elemBounds.top - pushBoxUp) +
-                    "px"
-            );
-            this.body.style.setProperty("font-size", "12px");
-            this.body.style.setProperty("font-family", "Arial, sans-serif");
-
-            // Style the info box with a blue background
-            this.body.style.setProperty("background", "#4285F4");
-            this.body.style.setProperty("color", "white");
-            this.body.style.setProperty("border-radius", "3px");
-            this.body.style.setProperty("padding", "5px 8px");
-            this.body.style.setProperty("box-shadow", "0 2px 5px rgba(0,0,0,0.2)");
-            this.body.style.setProperty("max-width", "300px");
-            this.body.style.setProperty("pointer-events", "none"); // Make it non-interactive
-
-            this.body.innerHTML = content;
             window.document.body.appendChild(this.body);
         },