Reordering the battle line meant finding a small ⠿ handle beside each
card. Now the card itself is the drag surface, with the gesture split by
input type so it can't collide with the two things a press already means:
* A mouse lifts the card once the cursor travels 5px. Shorter presses
stay clicks.
* A finger has to hold still for 220ms first. Arrange is the one screen
tall enough to scroll, and a finger swiping a card almost always
means scrolling — so the card deliberately does NOT set
`touch-action: none`. The hold is what distinguishes a drag, and once
it lands the scroll is cancelled by preventing `touchmove`, which
works precisely because a still finger hasn't started one.
That also fixes the phone's tap-to-magnify fighting the drag: only a
press that never became a drag counts as a tap, so hauling a card up the
list no longer pops the expanded card view open under your finger. A
picked-up card swells and casts a shadow, which on touch is the only
confirmation the hold registered.
The up/down arrows stay as the precise alternative and grow to 46px
(40px on phones) now that they aren't sharing space with the handle.
Greyson Parrelli
8383f0f718