From 27c36b6b9a138bf39a7e112e660660e49ac636b9 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Fri, 3 Apr 2026 18:46:52 +0200
Subject: [PATCH] fix: make entire candidate row draggable instead of
 handle-only

Remove dragControls/dragListener pattern which prevented onReorder
from firing. The whole row is now the drag target with visual feedback
(scale + shadow). Grip icon remains as a visual indicator.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/CandidateListItem.tsx | 23 +++++++++------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/client/components/CandidateListItem.tsx b/src/client/components/CandidateListItem.tsx
index f76c530..11a244a 100644
--- a/src/client/components/CandidateListItem.tsx
+++ b/src/client/components/CandidateListItem.tsx
@@ -1,4 +1,4 @@
-import { Reorder, useDragControls } from "framer-motion";
+import { Reorder } from "framer-motion";
 import { useFormatters } from "../hooks/useFormatters";
 import type { CandidateDelta } from "../hooks/useImpactDeltas";
 import { LucideIcon } from "../lib/iconData";
@@ -56,7 +56,6 @@ export function CandidateListItem({
 	delta,
 	onDragEnd,
 }: CandidateListItemProps) {
-	const controls = useDragControls();
 	const { weight, price } = useFormatters();
 	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
 	const openConfirmDeleteCandidate = useUIStore(
@@ -70,16 +69,11 @@ export function CandidateListItem({
 
 	const innerContent = (
 		<>
-			{/* Drag handle */}
+			{/* Drag handle indicator */}
 			{isActive && (
-				<button
-					type="button"
-					onPointerDown={(e) => controls.start(e)}
-					className="cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 touch-none shrink-0"
-					title="Drag to reorder"
-				>
+				<span className="text-gray-300 shrink-0">
 					<LucideIcon name="grip-vertical" size={16} />
-				</button>
+				</span>
 			)}
 
 			{/* Rank badge */}
@@ -217,12 +211,15 @@ export function CandidateListItem({
 		return (
 			<Reorder.Item
 				value={candidate}
-				dragControls={controls}
-				dragListener={false}
 				onDragEnd={onDragEnd}
 				layout="position"
+				whileDrag={{
+					scale: 1.02,
+					boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+					cursor: "grabbing",
+				}}
 				transition={{ layout: { duration: 0.15, ease: "easeOut" } }}
-				style={{ marginBottom: 8 }}
+				style={{ marginBottom: 8, cursor: "grab" }}
 				className={sharedClassName}
 			>
 				{innerContent}