fix: positioning of the element info box

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -376,17 +376,60 @@ function RemoteFunctions(config) {
             // Remove existing info box if any
             this.remove();
 
+            // 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
+
+            // 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>";
+
+            // Add ID if present
+            if (id) {
+                content += "<div style='margin-top: 3px;'>#" + id + "</div>";
+                pushBoxUp += 17;
+            }
+
+            // Add classes (limit to 3 with dropdown indicator)
+            if (classes.length > 0) {
+                content += "<div style='margin-top: 3px;'>";
+                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 += "</div>";
+
+                pushBoxUp += 17;
+            }
+
             // compute the position on screen
             var offset = _screenOffset(this.element),
                 x = offset.left,
                 y = offset.top - 30; // Position above the element
 
+            let elemBounds = this.element.getBoundingClientRect();
+
+            console.log("elemBounds: ", elemBounds);
+
             // 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", (offset.left) + "px");
-            this.body.style.setProperty("top", (offset.top - 30 < 0 ? offset.top + this.element.offsetHeight + 5 : offset.top - 30) + "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");
 
@@ -399,33 +442,6 @@ function RemoteFunctions(config) {
             this.body.style.setProperty("max-width", "300px");
             this.body.style.setProperty("pointer-events", "none"); // Make it non-interactive
 
-            // Get element ID and classes
-            var id = this.element.id;
-            var classes = this.element.className ? this.element.className.split(/\s+/).filter(Boolean) : [];
-
-            // Create content for the info box
-            var content = "";
-
-            // Add element tag name
-            content += "<div style='font-weight: bold;'>" + this.element.tagName.toLowerCase() + "</div>";
-
-            // Add ID if present
-            if (id) {
-                content += "<div style='margin-top: 3px;'>#" + id + "</div>";
-            }
-
-            // Add classes (limit to 3 with dropdown indicator)
-            if (classes.length > 0) {
-                content += "<div style='margin-top: 3px;'>";
-                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 += "</div>";
-            }
-
             this.body.innerHTML = content;
             window.document.body.appendChild(this.body);
         },