fix: make sure info box is within live preview bounds

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -991,6 +991,18 @@ function RemoteFunctions(config) {
                 }
             }
 
+            // to make sure that the info box stays under the viewport width
+            const viewportWidth = window.innerWidth;
+            const margin = 10;
+
+            // horizontal boundary checking
+            if (leftPos + boxWidth + margin > viewportWidth + scrollLeft) {
+                leftPos = viewportWidth + scrollLeft - boxWidth - margin;
+            }
+            if (leftPos < scrollLeft + margin) {
+                leftPos = scrollLeft + margin;
+            }
+
             const styles = `
                 .box {
                     background-color: #4285F4;
@@ -1583,6 +1595,20 @@ function RemoteFunctions(config) {
         _clickHighlight.selector = rule;
     }
 
+    // recreate UI boxes (info box and more options box)
+    function redrawUIBoxes() {
+        if (_nodeMoreOptionsBox) {
+            const element = _nodeMoreOptionsBox.element;
+            _nodeMoreOptionsBox.remove();
+            _nodeMoreOptionsBox = new NodeMoreOptionsBox(element);
+
+            if (_nodeInfoBox) {
+                _nodeInfoBox.remove();
+                _nodeInfoBox = new NodeInfoBox(element, true); // true means it came from a click
+            }
+        }
+    }
+
     // redraw active highlights
     function redrawHighlights() {
         if (_remoteHighlight) {
@@ -1594,19 +1620,15 @@ function RemoteFunctions(config) {
         if (_hoverHighlight) {
             _hoverHighlight.redraw();
         }
-        if (_nodeMoreOptionsBox) {
-            const element = _nodeMoreOptionsBox.element;
-            _nodeMoreOptionsBox.remove();
-            _nodeMoreOptionsBox = new NodeMoreOptionsBox(element);
+    }
 
-            if (_nodeInfoBox) {
-                _nodeInfoBox.remove();
-                _nodeInfoBox = new NodeInfoBox(element, true); // true means it came from a click
-            }
-        }
+    // just a wrapper function when we need to redraw highlights as well as UI boxes
+    function redrawEverything() {
+        redrawHighlights();
+        redrawUIBoxes();
     }
 
-    window.addEventListener("resize", redrawHighlights);
+    window.addEventListener("resize", redrawEverything);
     // Add a capture-phase scroll listener to update highlights when
     // any element scrolls.
 
@@ -1875,7 +1897,7 @@ function RemoteFunctions(config) {
         this.rememberedNodes = {};
 
         // update highlight after applying diffs
-        redrawHighlights();
+        redrawEverything();
     };
 
     function applyDOMEdits(edits) {
@@ -2164,6 +2186,7 @@ function RemoteFunctions(config) {
         "highlight"             : highlight,
         "highlightRule"         : highlightRule,
         "redrawHighlights"      : redrawHighlights,
+        "redrawEverything"      : redrawEverything,
         "applyDOMEdits"         : applyDOMEdits,
         "getSimpleDOM"          : getSimpleDOM,
         "updateConfig"          : updateConfig,