From a10abd8b480d9c86aa9c43fc975bc8a2e04082fb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 20 Mar 2026 22:44:10 +0000
Subject: [PATCH] Fix queue drag to only activate on handle and number, not
 entire row

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
---
 app/components/draft/QueueSection.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/components/draft/QueueSection.tsx b/app/components/draft/QueueSection.tsx
index b68193e..deb9fb5 100644
--- a/app/components/draft/QueueSection.tsx
+++ b/app/components/draft/QueueSection.tsx
@@ -67,6 +67,7 @@ function SortableQueueItem({
     attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging,
@@ -82,12 +83,17 @@ function SortableQueueItem({
     <div
       ref={setNodeRef}
       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"
       }`}
     >
-      <div className="flex items-center gap-2 flex-1 min-w-0" {...attributes} {...listeners}>
-        <div className="cursor-grab active:cursor-grabbing flex-shrink-0">
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <div
+          ref={setActivatorNodeRef}
+          {...listeners}
+          className="flex items-center gap-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="16"
@@ -103,8 +109,8 @@ function SortableQueueItem({
             <line x1="5" y1="9" x2="19" y2="9"></line>
             <line x1="5" y1="15" x2="19" y2="15"></line>
           </svg>
+          <Badge variant="default" className="text-xs">{index + 1}</Badge>
         </div>
-        <Badge variant="default" className="text-xs flex-shrink-0">{index + 1}</Badge>
         <div className="min-w-0">
           <p className="font-semibold text-sm truncate">{participantName}</p>
           {sportName && <p className="text-xs text-muted-foreground">{sportName}</p>}