chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions 2

Fix queue drag to only activate on handle and number, not entire row

Browse source 
Restricts drag listeners to the grab handle icon and order number badge
using setActivatorNodeRef, and removes touch-none from the whole row so
mobile users can scroll without accidentally reordering the queue.

https://claude.ai/code/session_01HPtNkL5m9xhYgtzWaGViSC
This commit is contained in:
Claude 2026-03-20 22:44:10 +00:00
parent 3f3401f0d8
commit a10abd8b48
No known key found for this signature in database
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/components/draft/QueueSection.tsx
View file

@ -67,6 +67,7 @@ function SortableQueueItem({
attributes, attributes,
listeners, listeners,
setNodeRef, setNodeRef,
setActivatorNodeRef,
transform, transform,
transition, transition,
isDragging, isDragging,
@ -82,12 +83,17 @@ function SortableQueueItem({
<div <div
ref={setNodeRef} ref={setNodeRef}
style={style} style={style}
className={`flex items-center justify-between p-2 rounded-lg touch-none ${ {...attributes}
className={`flex items-center justify-between p-2 rounded-lg ${
canPick ? "bg-electric/10 border border-electric/40" : "bg-muted" canPick ? "bg-electric/10 border border-electric/40" : "bg-muted"
}`} }`}
> >
<div className="flex items-center gap-2 flex-1 min-w-0" {...attributes} {...listeners}> <div className="flex items-center gap-2 flex-1 min-w-0">
<div className="cursor-grab active:cursor-grabbing flex-shrink-0"> <div
ref={setActivatorNodeRef}
{...listeners}
className="flex items-center gap-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="16" width="16"
@ -103,8 +109,8 @@ function SortableQueueItem({
<line x1="5" y1="9" x2="19" y2="9"></line> <line x1="5" y1="9" x2="19" y2="9"></line>
<line x1="5" y1="15" x2="19" y2="15"></line> <line x1="5" y1="15" x2="19" y2="15"></line>
</svg> </svg>
<Badge variant="default" className="text-xs">{index + 1}</Badge>
</div> </div>
<Badge variant="default" className="text-xs flex-shrink-0">{index + 1}</Badge>
<div className="min-w-0"> <div className="min-w-0">
<p className="font-semibold text-sm truncate">{participantName}</p> <p className="font-semibold text-sm truncate">{participantName}</p>
{sportName && <p className="text-xs text-muted-foreground">{sportName}</p>} {sportName && <p className="text-xs text-muted-foreground">{sportName}</p>}