Fix touch reordering on mobile browsers

[ophirSarusi]

Summary

Fix touch-based reordering on mobile browsers by disabling native touch scrolling on existing drag activators.

Problem

On mobile browsers, sortable elements can activate and appear to float, but moving the finger scrolls the page instead of reordering the element.

This affects:

• Reorderable list fields
• Multiple-image fields
• Multiple-file fields

Pages CMS uses dnd-kit's PointerSensor. Pointer-based dragging requires the drag activator to opt out of native browser panning; otherwise, the browser may interpret the gesture as page scrolling.

Change

Apply touch-action: none to the existing .cursor-move drag activators:

/* Pointer-based drag handles must opt out of native touch scrolling. */
.cursor-move {
  touch-action: none;
}

All current sortable activators already use this class, so the fix covers list handles, image thumbnails, and file thumbnails without duplicating styles across components.

The rule is limited to drag activators. Users can still scroll normally by swiping elsewhere on the page.

Manual validation

Tested using a dedicated reproduction harness with the same React, dnd-kit, and sensor configurations used by Pages CMS.

Test device:

• Firefox 145.0.2, build 2016128151
• GeckoView 145.0.2-20251124145406
• Android Components 145.0.2
• Android 16

Verified:

• The drag activator computes to touch-action: none
• List items can be reordered using the drag handle
• Image thumbnails can be reordered by touch
• The page does not scroll while dragging
• Normal page scrolling still works when swiping outside a drag activator

Scope

• One CSS file changed
• Five lines added
• No changes to desktop pointer behavior
• No changes to keyboard dragging
• No unrelated changes