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 openExternalLink = useUIStore((s) => s.openExternalLink);
|
||||||
|
|
||||||
const sharedClassName =
|
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 = (
|
const innerContent = (
|
||||||
<>
|
<>
|
||||||
@@ -220,6 +220,9 @@ export function CandidateListItem({
|
|||||||
dragControls={controls}
|
dragControls={controls}
|
||||||
dragListener={false}
|
dragListener={false}
|
||||||
onDragEnd={onDragEnd}
|
onDragEnd={onDragEnd}
|
||||||
|
layout="position"
|
||||||
|
transition={{ layout: { duration: 0.15, ease: "easeOut" } }}
|
||||||
|
style={{ marginBottom: 8 }}
|
||||||
className={sharedClassName}
|
className={sharedClassName}
|
||||||
>
|
>
|
||||||
{innerContent}
|
{innerContent}
|
||||||
|
|||||||
@@ -226,7 +226,7 @@ function ThreadDetailPage() {
|
|||||||
axis="y"
|
axis="y"
|
||||||
values={displayItems}
|
values={displayItems}
|
||||||
onReorder={setTempItems}
|
onReorder={setTempItems}
|
||||||
className="flex flex-col gap-2"
|
className="flex flex-col"
|
||||||
>
|
>
|
||||||
{displayItems.map((candidate, index) => (
|
{displayItems.map((candidate, index) => (
|
||||||
<CandidateListItem
|
<CandidateListItem
|
||||||
|
|||||||
Reference in New Issue
Block a user