From 1dc4018a3c2f04267595261cd8df514c227dccdc Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Tue, 29 Jul 2025 00:11:21 +0200
Subject: [PATCH] Use touch-action: pan-y to fix DnD vs scroll (#2350)

* Fix handleTouchMove not handling leaving elements

* Fix DnD vs scroll on mobile
---
 styles/dnd.module.css         |  2 +-
 wallets/client/context/dnd.js | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/styles/dnd.module.css b/styles/dnd.module.css
index 3b51ef8d..2fd2244a 100644
--- a/styles/dnd.module.css
+++ b/styles/dnd.module.css
@@ -18,7 +18,7 @@
 @media (max-width: 768px) {
   .draggable {
     /* https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */
-    touch-action: none;
+    touch-action: pan-y;
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
diff --git a/wallets/client/context/dnd.js b/wallets/client/context/dnd.js
index 198810ed..5c735383 100644
--- a/wallets/client/context/dnd.js
+++ b/wallets/client/context/dnd.js
@@ -123,14 +123,18 @@ export function useDndHandlers (index) {
       if (isTouchDragging) {
         // Find the element under the touch point
         const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY)
-        if (elementUnderTouch) {
-          const element = elementUnderTouch.closest('[data-index]')
-          if (element) {
-            const elementIndex = parseInt(element.dataset.index)
-            if (elementIndex !== index) {
-              dispatch({ type: DRAG_ENTER, index: elementIndex })
-            }
-          }
+        if (!elementUnderTouch) {
+          return dispatch({ type: DRAG_LEAVE })
+        }
+
+        const element = elementUnderTouch.closest('[data-index]')
+        if (!element) {
+          return dispatch({ type: DRAG_LEAVE })
+        }
+
+        const elementIndex = parseInt(element.dataset.index)
+        if (elementIndex !== index) {
+          dispatch({ type: DRAG_ENTER, index: elementIndex })
         }
       }
     }