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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user