From 7fd28c39f3d567b737357309a73b9718232235d0 Mon Sep 17 00:00:00 2001
From: Kartik <103111467+kartik-212004@users.noreply.github.com>
Date: Sat, 25 Oct 2025 15:33:22 +0530
Subject: [PATCH] fix: improve mobile positioning for link dialog in form
 builder checkbox editor (#24268)

* Updated positionEditorElement function to respect viewport boundaries

* cleanup
---
 .../editor/plugins/ToolbarPlugin.tsx          | 27 +++++++++++++++++--
 .../ui/components/editor/stylesEditor.css     |  2 +-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index 58ab9f9b76..aa08a117b2 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/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`;
   }
 }
 
diff --git a/packages/ui/components/editor/stylesEditor.css b/packages/ui/components/editor/stylesEditor.css
index 973445a8a8..0d5b5c14bb 100644
--- a/packages/ui/components/editor/stylesEditor.css
+++ b/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;