Improve auto-scrolling when components are dragged

Rewording to better capture that we need improvements in general for the auto-scrolling. See #3 as more input to the issue description.

Since landing #3475759: Implement a different approach to the iFrame preview interactions this issue is improved however I do think there is still room for improvement in that when you drag to the top and bottom of the screen, if your mouse is positioned over either the top bar or zoom controls the scroll behaviour is not invoked.

I suspect setting pointer events to none on those elements while isDragging is true will resolve the issue.

Moving to Minor.

I tried setting pointer-events to none on the top bar and zoom controls while isDragging is true but it did not worked, because actually the scroll starts only when the mouse is approximately 10px close to browser edge(top/bottom) and the top bar and zoom controls are far away.

I found that top bar and zoom controls actually not causing the misbehave of auto scroll and it's the default browser behaviour(by default auto scroll starts when mouse is very close to edge while dragging), I also found scrollSensitivity and scrollSpeed option used in ui/src/hooks/usePreviewSortable.ts but seems there is no effect of these options and only default browser behaviour is working because these both options works only if forceFallback is set as true, and setting forceFallback as true stops the drag and drop features completely(I didn't investigate further though).

I think you are correct @soaratul - the default browser behaviour means that the autoscroll is only invoked when dragging and the mouse cursor is < ~15px from the edge of the window. As our top bar and zoom controls are 20px from the edge, then making them have pointer-events:none actually has no impact on the autoscroll.

Closing as outdated because other changes since this ticket was opened have meant the issue is no longer valid.