Queue Section fixes.

app/components/draft/QueueSection.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { QueueSection } from "./QueueSection";
+
+const meta: Meta<typeof QueueSection> = {
+  title: "Draft/QueueSection",
+  component: QueueSection,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof QueueSection>;
+
+const participants = [
+  { id: "p1", name: "Max Verstappen", sport: { name: "F1" } },
+  { id: "p2", name: "LeBron James", sport: { name: "Basketball" } },
+  { id: "p3", name: "Scottie Scheffler", sport: { name: "Golf" } },
+  { id: "p4", name: "Alexander Ovechkin-Washington", sport: { name: "Ice Hockey" } },
+];
+
+const queue = [
+  { id: "q1", participantId: "p1" },
+  { id: "q2", participantId: "p2" },
+  { id: "q3", participantId: "p3" },
+];
+
+export const Empty: Story = {
+  args: {
+    queue: [],
+    availableParticipants: participants,
+    canPick: false,
+    onRemoveFromQueue: () => {},
+    onReorder: () => {},
+    onMakePick: () => {},
+  },
+};
+
+export const NotYourTurn: Story = {
+  name: "With Items — Not Your Turn",
+  args: {
+    queue,
+    availableParticipants: participants,
+    canPick: false,
+    onRemoveFromQueue: () => {},
+    onReorder: () => {},
+    onMakePick: () => {},
+  },
+};
+
+export const YourTurn: Story = {
+  name: "With Items — Your Turn (Draft button visible)",
+  args: {
+    queue,
+    availableParticipants: participants,
+    canPick: true,
+    onRemoveFromQueue: () => {},
+    onReorder: () => {},
+    onMakePick: () => {},
+  },
+};
+
+export const LongNameYourTurn: Story = {
+  name: "Long Name — Your Turn (two-line layout)",
+  args: {
+    queue: [{ id: "q1", participantId: "p4" }],
+    availableParticipants: participants,
+    canPick: true,
+    onRemoveFromQueue: () => {},
+    onReorder: () => {},
+    onMakePick: () => {},
+  },
+};
+
+export const LongNameNotYourTurn: Story = {
+  name: "Long Name — Not Your Turn (truncation only)",
+  args: {
+    queue: [{ id: "q1", participantId: "p4" }],
+    availableParticipants: participants,
+    canPick: false,
+    onRemoveFromQueue: () => {},
+    onReorder: () => {},
+    onMakePick: () => {},
+  },
+};
+
+export const SingleItem: Story = {
+  name: "Single Item — Your Turn",
+  args: {
+    queue: [{ id: "q1", participantId: "p1" }],
+    availableParticipants: participants,
+    canPick: true,
+    onRemoveFromQueue: () => {},
+    onReorder: () => {},
+    onMakePick: () => {},
+  },
+};
+
+const manyParticipants = [
+  { id: "p1", name: "Max Verstappen", sport: { name: "F1" } },
+  { id: "p2", name: "LeBron James", sport: { name: "Basketball" } },
+  { id: "p3", name: "Scottie Scheffler", sport: { name: "Golf" } },
+  { id: "p4", name: "Alexander Ovechkin-Washington", sport: { name: "Ice Hockey" } },
+  { id: "p5", name: "Patrick Mahomes", sport: { name: "NFL" } },
+  { id: "p6", name: "Connor McDavid", sport: { name: "Ice Hockey" } },
+  { id: "p7", name: "Novak Djokovic", sport: { name: "Tennis" } },
+  { id: "p8", name: "Erling Haaland", sport: { name: "Soccer" } },
+];
+
+const longQueue = manyParticipants.map((p, i) => ({ id: `q${i + 1}`, participantId: p.id }));
+
+export const FullQueue: Story = {
+  name: "Full Queue — Your Turn (scroll check)",
+  args: {
+    queue: longQueue,
+    availableParticipants: manyParticipants,
+    canPick: true,
+    onRemoveFromQueue: () => {},
+    onReorder: () => {},
+    onMakePick: () => {},
+  },
+};

app/components/draft/QueueSection.tsx

@@ -75,45 +75,45 @@ const SortableQueueItem = memo(function SortableQueueItem({
       ref={setNodeRef}
       style={style}
       {...attributes}
-      className={`flex items-center justify-between p-2 rounded-lg ${
+      className={`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">
+      <div className="flex items-center gap-2">
         <div
           ref={setActivatorNodeRef}
           {...listeners}
-          className="flex items-center gap-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
+          className="w-10 flex items-center gap-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
         >
           <GripVertical className="w-4 h-4 text-muted-foreground" />
           <Badge variant="default" className="text-xs">{index + 1}</Badge>
         </div>
-        <div className="min-w-0">
+        <div className="min-w-0 flex-1">
           <p className="font-semibold text-sm truncate">{participantName}</p>
           {sportName && <p className="text-xs text-muted-foreground">{sportName}</p>}
         </div>
-      </div>
-      <div className="flex items-center gap-1 flex-shrink-0 ml-2">
-        {canPick && onDraft && (
-          <Button
-            variant="default"
-            size="sm"
-            className="h-7 text-xs bg-electric text-background hover:bg-electric/90"
-            onClick={() => onDraft(item.participantId)}
-          >
-            Draft
-          </Button>
-        )}
         <Button
           variant="ghost"
           size="icon"
-          className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
+          className="h-7 w-7 flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
           onClick={() => onRemove(item.id)}
           title="Remove from queue"
         >
           <span className="text-lg">×</span>
         </Button>
       </div>
+      {canPick && onDraft && (
+        <div className="mt-1.5 pl-10">
+          <Button
+            variant="default"
+            size="sm"
+            className="h-7 text-xs w-full bg-electric text-background hover:bg-electric/90"
+            onClick={() => onDraft(item.participantId)}
+          >
+            Draft
+          </Button>
+        </div>
+      )}
     </div>
   );
 });