src/client/components/CandidateListItem.tsx

@@ -66,7 +66,7 @@ export function CandidateListItem({
 	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
 	const sharedClassName =
-		"flex items-center gap-3 bg-white rounded-xl border border-gray-100 p-3 hover:border-gray-200 hover:shadow-sm transition-all group cursor-default";
+		"flex items-center gap-3 bg-white rounded-xl border border-gray-100 p-3 hover:border-gray-200 hover:shadow-sm group cursor-default";
 
 	const innerContent = (
 		<>
@@ -220,6 +220,9 @@ export function CandidateListItem({
 				dragControls={controls}
 				dragListener={false}
 				onDragEnd={onDragEnd}
+				layout="position"
+				transition={{ layout: { duration: 0.15, ease: "easeOut" } }}
+				style={{ marginBottom: 8 }}
 				className={sharedClassName}
 			>
 				{innerContent}

src/client/routes/threads/$threadId.tsx

@@ -226,7 +226,7 @@ function ThreadDetailPage() {
 						axis="y"
 						values={displayItems}
 						onReorder={setTempItems}
-						className="flex flex-col gap-2"
+						className="flex flex-col"
 					>
 						{displayItems.map((candidate, index) => (
 							<CandidateListItem