fix: boxes gets out of viewport

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -508,10 +508,16 @@ function RemoteFunctions(config) {
             let topPos = offset.top - boxHeight - 6; // 6 for just some little space to breathe
             let leftPos = offset.left + elemBounds.width - boxWidth;
 
+            // Check if the box would go off the top of the viewport
             if (offset.top - boxHeight < 0) {
                 topPos = offset.top + elemBounds.height + 6;
             }
 
+            // Check if the box would go off the left of the viewport
+            if (leftPos < 0) {
+                leftPos = offset.left;
+            }
+
             return {topPos: topPos, leftPos: leftPos};
         },
 
@@ -715,7 +721,7 @@ function RemoteFunctions(config) {
             return false;
         },
 
-        _getBoxPosition: function(boxHeight, overlap = false) {
+        _getBoxPosition: function(boxDimensions, overlap = false) {
             const elemBounds = this.element.getBoundingClientRect();
             const offset = _screenOffset(this.element);
             let topPos = 0;
@@ -724,13 +730,23 @@ function RemoteFunctions(config) {
             if (overlap) {
                 topPos = offset.top + 2;
                 leftPos = offset.left + elemBounds.width + 6;
+
+                // Check if overlap position would go off the right of the viewport
+                if (leftPos + boxDimensions.width > window.innerWidth) {
+                    leftPos = offset.left - boxDimensions.width - 6;
+                }
             } else {
-                topPos = offset.top - boxHeight - 6; // 6 for just some little space to breathes
+                topPos = offset.top - boxDimensions.height - 6; // 6 for just some little space to breathe
                 leftPos = offset.left;
 
-                if (offset.top - boxHeight < 0) {
+                if (offset.top - boxDimensions.height < 0) {
                     topPos = offset.top + elemBounds.height + 6;
                 }
+
+                // Check if the box would go off the right of the viewport
+                if (leftPos + boxDimensions.width > window.innerWidth) {
+                    leftPos = window.innerWidth - boxDimensions.width - 10;
+                }
             }
 
             return {topPos: topPos, leftPos: leftPos};
@@ -824,15 +840,15 @@ function RemoteFunctions(config) {
                     height: boxElement.getBoundingClientRect().height,
                     width: boxElement.getBoundingClientRect().width
                 };
-                const nodeInfoBoxPos = this._getBoxPosition(nodeInfoBoxDimensions.height);
+                const nodeInfoBoxPos = this._getBoxPosition(nodeInfoBoxDimensions, false);
 
                 boxElement.style.left = nodeInfoBoxPos.leftPos + 'px';
                 boxElement.style.top = nodeInfoBoxPos.topPos + 'px';
 
                 if(this.isFromClick) {
                     const isBoxOverlapping = this._checkOverlap(nodeInfoBoxPos, nodeInfoBoxDimensions);
                     if(isBoxOverlapping) {
-                        const newPos = this._getBoxPosition(nodeInfoBoxDimensions.height, true);
+                        const newPos = this._getBoxPosition(nodeInfoBoxDimensions, true);
                         boxElement.style.left = newPos.leftPos + 'px';
                         boxElement.style.top = newPos.topPos + 'px';
                     }