Monitors can't be positioned past halfway right (or halfway down) when stage is in small display mode

[benjiwheeler]

...that's as far as you can position it:

Same thing happens when the stage is in the 85% intermediary size, but only about 85% of the way

[benjiwheeler]

Investigated this a bit more.

In components/monitor/monitor.jsx, we use the react-draggable package to make the monitor draggable, within the bounds of the components/monitor-list/monitor-list.jsx. We use the static class name "monitor-overlay" to link these.

<Draggable ... /> looks up the selector for this class and sets its bounds using the position of the selector.

But meanwhile, components/monitor/monitor.jsx uses the stageSizeToTransform() function to obtain a css transform style. When the stage is small, this is scale(0.5, 0.5).

This scaling does a great job making the monitor look the correct size, and putting it in the right position -- before it's dragged.

BUT when you drag, react-draggable is confused and positions the monitor relative to what the scaled monitor-overlay element bounds would be. That is, it's producing x and y values that would make sense if they were actually applied as such, but they are then being scaled.

It sounds like others have had this issue (1, 2), and I can't think of an easy solution. We might need to take over the dragging ourselves...

[paulkaplan]

Good investigation! Yeah seems tough to handle. We do manage drag to reposition in various places, so the relevant code is probably around, although might be tough for the same reason react-draggable has trouble. I know this is a bad bug, but I kind of doubt many people are positioning monitors in small-stage mode. We may need to push this into the backlog?

[benjiwheeler]

Agreed, it seems like the time investment probably isn't worth it before launch.