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}