fix: prevent boxes overlapping the element edge cases

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1875,6 +1875,28 @@ function RemoteFunctions(config = {}) {
             topPos = offsetBounds.top;
             break;
 
+        case 'top-adjusted':
+            // 30px is estimated height of options box
+            leftPos = offsetBounds.left;
+            topPos =  offsetBounds.top - boxDimensions.height - verticalOffset - 30;
+            break;
+
+        case 'bottom-adjusted':
+            leftPos = offsetBounds.left;
+            topPos = offsetBounds.top + elemBounds.height + verticalOffset + 30;
+            break;
+
+        case 'left-adjusted':
+            // 5px is just some extra spacing to handle some edge cases
+            leftPos = offsetBounds.left - boxDimensions.width + elemBounds.width - 5;
+            topPos = offsetBounds.top + elemBounds.height + verticalOffset + 5;
+            break;
+
+        case 'right-adjusted':
+            leftPos = offsetBounds.left + elemBounds.width + horizontalOffset + 5;
+            topPos = offsetBounds.top + elemBounds.height + verticalOffset - 5;
+            break;
+
         case 'inside-top-left':
             leftPos = offsetBounds.left;
             topPos = offsetBounds.top;
@@ -1998,9 +2020,13 @@ function RemoteFunctions(config = {}) {
                 'left',
                 'right',
                 'bottom-left',
+                'top-adjusted',
+                'bottom-adjusted',
+                'left-adjusted',
+                'right-adjusted',
                 'inside-top-left'
             ],
-            'options-box': [
+            'options-box': [ // we don't need adjusted positioning for options box as it gets placed before info box
                 'top-right',
                 'right',
                 'left',