From 078452d2fb013b3d378260c1b6bd81a2268be8a7 Mon Sep 17 00:00:00 2001
From: nimeratus <nemcsics.benedek@gmail.com>
Date: Sun, 7 Sep 2025 13:21:16 +0200
Subject: [PATCH 1/4] fix: dragging bounds

Use the CSS transform to resize the dragging bounds,
instead of changing the width/height properties.
This way CSS word-wrapping and react-draggable will
let the monitors go to the edges of the stage.
---
 .../src/components/monitor-list/monitor-list.jsx         | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx b/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
index e4da715b0b..c1241fe73d 100644
--- a/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
+++ b/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
@@ -11,15 +11,14 @@ import styles from './monitor-list.css';
 const MonitorList = props => (
     <Box
         // Use static `monitor-overlay` class for bounds of draggables
-        className={classNames(styles.monitorList, 'monitor-overlay')}
+        className={classNames(styles.monitorList, styles.monitorListScaler, 'monitor-overlay')}
         style={{
-            width: props.stageSize.width,
-            height: props.stageSize.height
+            width: props.stageSize.widthDefault,
+            height: props.stageSize.heightDefault,
+            ...stageSizeToTransform(props.stageSize)
         }}
     >
         <Box
-            className={styles.monitorListScaler}
-            style={stageSizeToTransform(props.stageSize)}
         >
             {props.monitors.valueSeq().filter(m => m.visible)
                 .map(monitorData => (

From de58733eb38cc79982262a87db7e252422a73b21 Mon Sep 17 00:00:00 2001
From: nimeratus <nemcsics.benedek@gmail.com>
Date: Sun, 7 Sep 2025 13:34:46 +0200
Subject: [PATCH 2/4] refactor: delete the <Box> that used to do the CSS
 transform

---
 .../components/monitor-list/monitor-list.jsx  | 47 +++++++++----------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx b/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
index c1241fe73d..e78f24b629 100644
--- a/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
+++ b/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
@@ -18,31 +18,28 @@ const MonitorList = props => (
             ...stageSizeToTransform(props.stageSize)
         }}
     >
-        <Box
-        >
-            {props.monitors.valueSeq().filter(m => m.visible)
-                .map(monitorData => (
-                    <Monitor
-                        draggable={props.draggable}
-                        height={monitorData.height}
-                        id={monitorData.id}
-                        isDiscrete={monitorData.isDiscrete}
-                        key={monitorData.id}
-                        max={monitorData.sliderMax}
-                        min={monitorData.sliderMin}
-                        mode={monitorData.mode}
-                        opcode={monitorData.opcode}
-                        params={monitorData.params}
-                        spriteName={monitorData.spriteName}
-                        targetId={monitorData.targetId}
-                        value={monitorData.value}
-                        width={monitorData.width}
-                        x={monitorData.x}
-                        y={monitorData.y}
-                        onDragEnd={props.onMonitorChange}
-                    />
-                ))}
-        </Box>
+        {props.monitors.valueSeq().filter(m => m.visible)
+            .map(monitorData => (
+                <Monitor
+                    draggable={props.draggable}
+                    height={monitorData.height}
+                    id={monitorData.id}
+                    isDiscrete={monitorData.isDiscrete}
+                    key={monitorData.id}
+                    max={monitorData.sliderMax}
+                    min={monitorData.sliderMin}
+                    mode={monitorData.mode}
+                    opcode={monitorData.opcode}
+                    params={monitorData.params}
+                    spriteName={monitorData.spriteName}
+                    targetId={monitorData.targetId}
+                    value={monitorData.value}
+                    width={monitorData.width}
+                    x={monitorData.x}
+                    y={monitorData.y}
+                    onDragEnd={props.onMonitorChange}
+                />
+            ))}
     </Box>
 );
 

From 19cb3be49a92ebd1bf11e03a998cdc41313b9fd2 Mon Sep 17 00:00:00 2001
From: nimeratus <nemcsics.benedek@gmail.com>
Date: Sun, 7 Sep 2025 13:59:41 +0200
Subject: [PATCH 3/4] fix: tell scale to react-draggable

Forward the scale info through <Monitor> and <MonitorComponent> to <Draggable>.
This way the monitor will move at the same speed as the cursor.
---
 .../scratch-gui/src/components/monitor-list/monitor-list.jsx  | 4 +++-
 packages/scratch-gui/src/components/monitor/monitor.jsx       | 2 ++
 packages/scratch-gui/src/containers/monitor.jsx               | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx b/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
index e78f24b629..f72f4389e9 100644
--- a/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
+++ b/packages/scratch-gui/src/components/monitor-list/monitor-list.jsx
@@ -22,6 +22,7 @@ const MonitorList = props => (
             .map(monitorData => (
                 <Monitor
                     draggable={props.draggable}
+                    scale={props.stageSize.scale}
                     height={monitorData.height}
                     id={monitorData.id}
                     isDiscrete={monitorData.isDiscrete}
@@ -51,7 +52,8 @@ MonitorList.propTypes = {
         width: PropTypes.number,
         height: PropTypes.number,
         widthDefault: PropTypes.number,
-        heightDefault: PropTypes.number
+        heightDefault: PropTypes.number,
+        scale: PropTypes.number
     }).isRequired
 };
 
diff --git a/packages/scratch-gui/src/components/monitor/monitor.jsx b/packages/scratch-gui/src/components/monitor/monitor.jsx
index d9ceb92695..f8f97b6085 100644
--- a/packages/scratch-gui/src/components/monitor/monitor.jsx
+++ b/packages/scratch-gui/src/components/monitor/monitor.jsx
@@ -52,6 +52,7 @@ const MonitorComponent = props => (
             defaultClassNameDragging={styles.dragging}
             disabled={!props.draggable}
             onStop={props.onDragEnd}
+            scale={props.scale} // Used for moving the monitor at the correct speed
         >
             <Box
                 className={styles.monitorContainer}
@@ -138,6 +139,7 @@ MonitorComponent.propTypes = {
     category: PropTypes.oneOf(Object.keys(categoryColorMap)),
     componentRef: PropTypes.func.isRequired,
     draggable: PropTypes.bool.isRequired,
+    scale: PropTypes.number,
     label: PropTypes.string.isRequired,
     mode: PropTypes.oneOf(monitorModes),
     onDragEnd: PropTypes.func.isRequired,
diff --git a/packages/scratch-gui/src/containers/monitor.jsx b/packages/scratch-gui/src/containers/monitor.jsx
index 94b0117142..b398b26663 100644
--- a/packages/scratch-gui/src/containers/monitor.jsx
+++ b/packages/scratch-gui/src/containers/monitor.jsx
@@ -208,6 +208,7 @@ class Monitor extends React.Component {
                     componentRef={this.setElement}
                     {...monitorProps}
                     draggable={this.props.draggable}
+                    scale={this.props.scale}
                     height={this.props.height}
                     isDiscrete={this.props.isDiscrete}
                     max={this.props.max}
@@ -234,6 +235,7 @@ class Monitor extends React.Component {
 Monitor.propTypes = {
     addMonitorRect: PropTypes.func.isRequired,
     draggable: PropTypes.bool,
+    scale: PropTypes.number,
     height: PropTypes.number,
     id: PropTypes.string.isRequired,
     intl: intlShape,

From 6d0344f2547d61d058f76e30fe415cb44a084c54 Mon Sep 17 00:00:00 2001
From: nimeratus <nemcsics.benedek@gmail.com>
Date: Wed, 10 Sep 2025 23:18:20 +0200
Subject: [PATCH 4/4] fix: round monitor coordinates while dragging

because the existing code seems to expect monitor coordinates to be integers,
but now that `scale` isn't 1, they could become fractions

Set `grid` on <Draggable> - This way it will round the coordinates in the CSS transform
Round coordinates in handleDragEnd
---
 packages/scratch-gui/src/components/monitor/monitor.jsx | 2 ++
 packages/scratch-gui/src/containers/monitor.jsx         | 7 +++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/scratch-gui/src/components/monitor/monitor.jsx b/packages/scratch-gui/src/components/monitor/monitor.jsx
index f8f97b6085..95d6c550bc 100644
--- a/packages/scratch-gui/src/components/monitor/monitor.jsx
+++ b/packages/scratch-gui/src/components/monitor/monitor.jsx
@@ -53,6 +53,8 @@ const MonitorComponent = props => (
             disabled={!props.draggable}
             onStop={props.onDragEnd}
             scale={props.scale} // Used for moving the monitor at the correct speed
+            grid={[1 * props.scale, 1 * props.scale]} // Tell the Draggable to round the coordinates
+            // See https://github.com/react-grid-layout/react-draggable/issues/664 on why it's not just [1, 1]
         >
             <Box
                 className={styles.monitorContainer}
diff --git a/packages/scratch-gui/src/containers/monitor.jsx b/packages/scratch-gui/src/containers/monitor.jsx
index b398b26663..117c215c74 100644
--- a/packages/scratch-gui/src/containers/monitor.jsx
+++ b/packages/scratch-gui/src/containers/monitor.jsx
@@ -104,6 +104,13 @@ class Monitor extends React.Component {
         this.props.removeMonitorRect(this.props.id);
     }
     handleDragEnd (e, {x, y}) {
+        // The old version of <Draggable> that Scratch uses doesn't round the coordinates when
+        // it passes them to the event handler, only when it sets the CSS transform.
+        // Newer versions of <Draggable> would round the coordinates, but with floating point errors
+        // so it would still need the manual rounding
+        x = Math.round(x);
+        y = Math.round(y);
+        
         const newX = parseInt(this.element.style.left, 10) + x;
         const newY = parseInt(this.element.style.top, 10) + y;
         this.props.onDragEnd(