From a9e4ab7268d1022ee8ea4eb01f5199947cdd160d Mon Sep 17 00:00:00 2001
From: Chessing234 <134995372+Chessing234@users.noreply.github.com>
Date: Mon, 4 May 2026 20:33:49 +0530
Subject: [PATCH] fix(list-monitor): wire touch events to resize handle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The resize handle registered onMouseDown / mousemove / mouseup only, so
drag-to-resize was completely non-functional on touchscreens. getEventXY
(already imported from touch-utils and used inside handleResizeMouseDown)
normalises both mouse and touch coordinates, so no extra extraction logic
is needed — the events just needed to be registered.

Adds onTouchStart to the JSX resize div and registers touchmove / touchend
alongside their mouse equivalents, with symmetric cleanup in onMouseUp.

Fixes #9821.
---
 src/components/monitor/list-monitor.jsx | 2 ++
 src/containers/list-monitor.jsx         | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/monitor/list-monitor.jsx b/src/components/monitor/list-monitor.jsx
index 4bd9a2563a9..0e832f14385 100644
--- a/src/components/monitor/list-monitor.jsx
+++ b/src/components/monitor/list-monitor.jsx
@@ -45,6 +45,7 @@ const ListMonitor = ({draggable, label, width, height, value, onResizeMouseDown,
             <div
                 className={classNames(draggable ? styles.resizeHandle : null, 'no-drag')}
                 onMouseDown={draggable ? onResizeMouseDown : null}
+                onTouchStart={draggable ? onResizeMouseDown : null}
             >
                 {'=' /* TODO waiting on asset */}
             </div>
@@ -81,3 +82,4 @@ ListMonitor.defaultProps = {
 };
 
 export default ListMonitor;
+
diff --git a/src/containers/list-monitor.jsx b/src/containers/list-monitor.jsx
index c8d06e511bd..3588c8762fd 100644
--- a/src/containers/list-monitor.jsx
+++ b/src/containers/list-monitor.jsx
@@ -141,6 +141,8 @@ class ListMonitor extends React.Component {
             onMouseMove(ev); // Make sure width/height are up-to-date
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
+            window.removeEventListener('touchmove', onMouseMove);
+            window.removeEventListener('touchend', onMouseUp);
             this.props.vm.runtime.requestUpdateMonitor(Map({
                 id: this.props.id,
                 height: this.state.height,
@@ -150,6 +152,8 @@ class ListMonitor extends React.Component {
 
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('mouseup', onMouseUp);
+        window.addEventListener('touchmove', onMouseMove);
+        window.addEventListener('touchend', onMouseUp);
 
     }
 
@@ -199,3 +203,4 @@ ListMonitor.propTypes = {
 const mapStateToProps = state => ({vm: state.scratchGui.vm});
 
 export default connect(mapStateToProps)(ListMonitor);
+