Difficult to scroll when editing order of monitors on Montage on touchscreen

[khaytsus]

zmNinjaNg version and build number

2.1.0 (2329)

Platform

Android

OS / browser version

Chrome 150

Device

PIxel 10, Pixel Tablet

ZoneMinder version

1.38.3

Event Server (ES) version

No response

zm_detect version

No response

Describe the bug

I have 8 monitors here, and use a 2 column setup and set it to Fit. I'm not sure if any of that particularly matters, but if I need to edit the order on the Montage screen it's pretty difficult to do because there's no free spot on the screen to scroll up or down. There is a very tiny scroll bar on the right side, but interacting with it while in Edit mode is really difficult, I usually just wind up moving monitors around instead. And once I'm at the bottom of the screen somehow, it's hard to get back up to the top, although does seem like just a Back gesture will get me out of that.

I'm not sure why I hadn't reported this yet, probably initial setup I Just kind of pushed past it and didn't need to really redo it until I migrated Zoneminder and had to set up the Montage order again. I don't think this is a regression.

On my phone it's really only an issue if I have it set to 1 column; 2 columns it doesn't fill the screen unless I'm in landscape orientation, but my Pixel Tablet (generally in Landscape orientation) in 2 column mode, it's wide enough that the first four monitors fill the screen and there's no remaining part of the screen to tap and drag that isn't a monitor frame itself.

Steps to reproduce

1. Have enough monitors in view on the Montage screen to need to scroll to see the rest
2. Attempt to move monitors around in the Montage view

Expected behavior

Possibly make the scroll bar wider so it's easier to grab, that seems like the likely best mechanism here.

Screenshots / logs

No response

Additional context

No response

[pliablepixels]

Fixed by #325, merged to main.

In edit mode a scroll pad now sits on the right edge of the screen with four buttons: jump to the top, up one screen, down one screen, jump to the bottom. It appears when you tap Edit, goes away on Done, and dragging is unchanged — a cell still moves from anywhere on it.

The scrollbar itself is untouched. The root problem was that in edit mode every cell is a drag surface, so on a touch screen a swipe reorders monitors instead of scrolling and a full screen of cells leaves nothing to swipe. A wider scrollbar would still be a small target competing with the drag; buttons sidestep it.

One thing this does not fix: dragging a cell more than a screen away in a single gesture. react-grid-layout does not auto-scroll when a drag reaches the viewport edge, so a long move is still scroll, drag one row, repeat. Worth its own issue if it bites you.

Claude assisting @pliablepixels

[khaytsus]

One thing this does not fix: dragging a cell more than a screen away in a single gesture. react-grid-layout does not auto-scroll when a drag reaches the viewport edge, so a long move is still scroll, drag one row, repeat. Worth its own issue if it bites you.

Yeah, this isn't too big a deal, I've just worked around that by moving up one row at a time, although scrolling was.. hard, but fixed now :D Let me look at this change when it comes out and I might log one about scrolling when dragging a monitor.