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) <noreply@anthropic.com>
This commit is contained in:
2026-04-03 18:44:39 +02:00
parent 52751ae9d4
commit 684cfd3789
2 changed files with 5 additions and 2 deletions

View File

@@ -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}

View File

@@ -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