From 684cfd3789cb2e32aa701b4da5da509a886eac79 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Fri, 3 Apr 2026 18:44:39 +0200 Subject: [PATCH] fix: stabilize drag-to-reorder with layout animation fixes - Remove transition-all from list items (fights framer-motion layout) - Add layout="position" to Reorder.Item for proper sibling tracking - Replace CSS gap with marginBottom (gap confuses layout engine) - Add explicit short transition duration for snappy reorder Co-Authored-By: Claude Opus 4.6 (1M context) --- src/client/components/CandidateListItem.tsx | 5 ++++- src/client/routes/threads/$threadId.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/client/components/CandidateListItem.tsx b/src/client/components/CandidateListItem.tsx index d69e479..f76c530 100644 --- a/src/client/components/CandidateListItem.tsx +++ b/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} diff --git a/src/client/routes/threads/$threadId.tsx b/src/client/routes/threads/$threadId.tsx index a9a0799..bcb9cd9 100644 --- a/src/client/routes/threads/$threadId.tsx +++ b/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) => (