fix card click delay when reduced motion is active

Skip layoutId and use instant transitions on the card detail modal
when reduced motion is on. The shared layout animation kept the z-50
overlay in the DOM during its exit spring, blocking all card clicks
until it settled.
This commit is contained in:
Your Name
2026-02-16 18:51:35 +02:00
parent 93587d681a
commit 36dbcf6f69

View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { X } from "lucide-react";
import { useBoardStore } from "@/stores/board-store";
@@ -25,6 +25,8 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
const updateCard = useBoardStore((s) => s.updateCard);
const open = cardId != null && card != null;
const prefersReducedMotion = useReducedMotion();
const instant = { duration: 0 };
return (
<AnimatePresence>
@@ -36,7 +38,7 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
transition={prefersReducedMotion ? instant : { duration: 0.2 }}
onClick={onClose}
/>
@@ -46,9 +48,12 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
onClick={onClose}
>
<motion.div
layoutId={`card-${cardId}`}
layoutId={prefersReducedMotion ? undefined : `card-${cardId}`}
className="relative w-full max-w-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
transition={springs.gentle}
initial={prefersReducedMotion ? { opacity: 0 } : undefined}
animate={prefersReducedMotion ? { opacity: 1 } : undefined}
exit={prefersReducedMotion ? { opacity: 0 } : undefined}
transition={prefersReducedMotion ? instant : springs.gentle}
onClick={(e) => e.stopPropagation()}
>
<EscapeHandler onClose={onClose} />