From 38225150b2fb400c7b359994133f4ef9d2101916 Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Sun, 20 Jul 2025 13:08:42 +0330
Subject: [PATCH 1/2] fix(devtool): improve scroll behaviour

---
 packages/core/src/devtool/devtool.ts | 10 ++++++++--
 packages/core/src/devtool/utils.ts   | 16 ++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/devtool/devtool.ts b/packages/core/src/devtool/devtool.ts
index 154648f..08ee506 100644
--- a/packages/core/src/devtool/devtool.ts
+++ b/packages/core/src/devtool/devtool.ts
@@ -68,6 +68,7 @@ export const renderChipGroup = (items: string[]) => {
     overflow: "hidden",
     "white-space": "nowrap",
     "text-overflow": "ellipsis",
+    "overscroll-behavior-y": "contain",
   });
 
   const chipGroupStyle = generateInlineStyle({
@@ -165,6 +166,7 @@ export const renderLogs = () => {
     style: generateInlineStyle({
       "max-height": "20rem",
       overflow: "scroll",
+      "overscroll-behavior-y": "contain",
     }),
   });
 
@@ -287,9 +289,13 @@ const init = () => {
   devtoolWrapper.innerHTML = renderDevtool();
 
   document.body.appendChild(devtoolWrapper);
-  makeElementDraggable(devtoolWrapper);
 
-  getDevtoolIconElement()?.addEventListener("click", toggle);
+  const iconButton = getDevtoolIconElement();
+
+  if (iconButton) {
+    iconButton.addEventListener("click", toggle);
+    makeElementDraggable(iconButton, devtoolWrapper);
+  }
 
   [DEVTOOL_CLOSE_ICON_ID, DEVTOOL_SOCKET_ICON_ID].forEach(icon => {
     const buttonIcon = document.getElementById(icon);
diff --git a/packages/core/src/devtool/utils.ts b/packages/core/src/devtool/utils.ts
index fbb494d..4485969 100644
--- a/packages/core/src/devtool/utils.ts
+++ b/packages/core/src/devtool/utils.ts
@@ -51,9 +51,13 @@ export const generateAttributes = (
  * - The element must be absolutely or fixed-positioned, and should not be constrained by layout flow
  * - Internally sets `element.style.touchAction = 'none'` to disable browser-native touch gestures
  *
- * @param element - The HTMLElement to make draggable
+ * @param dragHandle - The drag handle.
+ * @param dragTarget - The HTMLElement that will move when dragging with the handler.
  */
-export const makeElementDraggable = (element: HTMLElement) => {
+export const makeElementDraggable = (
+  dragHandle: HTMLElement,
+  dragTarget: HTMLElement,
+) => {
   // Extract clientX from MouseEvent or TouchEvent
   const getClientX = (event: MouseEvent | TouchEvent) => {
     if (event instanceof MouseEvent) return event.clientX;
@@ -112,7 +116,7 @@ export const makeElementDraggable = (element: HTMLElement) => {
       x = initialX + deltaX;
       y = initialY + deltaY;
 
-      element.style.transform = `translate(${x}px, ${y}px)`;
+      dragTarget.style.transform = `translate(${x}px, ${y}px)`;
     }
   };
 
@@ -125,10 +129,10 @@ export const makeElementDraggable = (element: HTMLElement) => {
   };
 
   // Disable browser-native touch gestures (scroll, nav swipe)
-  element.style.touchAction = "none";
+  dragHandle.style.touchAction = "none";
 
-  element.addEventListener("touchstart", handleDragStart, false);
-  element.addEventListener("mousedown", handleDragStart, false);
+  dragHandle.addEventListener("touchstart", handleDragStart, false);
+  dragHandle.addEventListener("mousedown", handleDragStart, false);
 
   document.addEventListener("mousemove", handleDragging, false);
   document.addEventListener("touchmove", handleDragging, false);

From 313421e8ca379bc8799afc9e9b0d6a4f57db4a09 Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Sun, 20 Jul 2025 13:18:22 +0330
Subject: [PATCH 2/2] docs: update changeset

---
 .changeset/dry-insects-speak.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/dry-insects-speak.md

diff --git a/.changeset/dry-insects-speak.md b/.changeset/dry-insects-speak.md
new file mode 100644
index 0000000..c2b7f5c
--- /dev/null
+++ b/.changeset/dry-insects-speak.md
@@ -0,0 +1,7 @@
+---
+"@tapsioss/react-client-socket-manager": patch
+"@tapsioss/client-socket-manager": patch
+---
+
+Improve devtool expecience in mobile devices.
+  
\ No newline at end of file