fix: improve mobile positioning for link dialog in form builder checkbox editor (calcom#24268)

* Updated positionEditorElement function to respect viewport boundaries

* cleanup

Author: kartik-212004

packages/ui/components/editor/plugins/ToolbarPlugin.tsx

@@ -54,8 +54,31 @@ function positionEditorElement(editor: HTMLInputElement, rect: DOMRect | null) {
     editor.style.left = "-1000px";
   } else {
     editor.style.opacity = "1";
-    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
-    editor.style.left = `${rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2}px`;
+
+    let top = rect.top + rect.height + window.pageYOffset + 10;
+    let left = rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2;
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const editorWidth = editor.offsetWidth || 300;
+    const editorHeight = editor.offsetHeight || 100;
+
+    if (left < 10) {
+      left = 10;
+    } else if (left + editorWidth > viewportWidth - 10) {
+      left = viewportWidth - editorWidth - 10;
+    }
+
+    if (top + editorHeight > window.pageYOffset + viewportHeight - 10) {
+      top = rect.top + window.pageYOffset - editorHeight - 10;
+
+      if (top < window.pageYOffset + 10) {
+        top = window.pageYOffset + 10;
+      }
+    }
+
+    editor.style.top = `${top}px`;
+    editor.style.left = `${left}px`;
   }
 }
 

packages/ui/components/editor/stylesEditor.css

@@ -276,7 +276,7 @@ pre::-webkit-scrollbar-thumb {
   top: -10000px;
   left: -10000px;
   margin-top: -6px;
-  max-width: 300px;
+  max-width: min(300px, calc(100vw - 20px));
   width: 100%;
   opacity: 0;
   background-color: #fff;