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