From 10176f8968c2e4043e297b0e69d4a0c6704a7e7c Mon Sep 17 00:00:00 2001
From: lashman <lashman@robotbrush.com>
Date: Mon, 16 Feb 2026 18:51:35 +0200
Subject: [PATCH] fix card click delay when reduced motion is active

---
 src/components/card-detail/CardDetailModal.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/card-detail/CardDetailModal.tsx b/src/components/card-detail/CardDetailModal.tsx
index dce86db..6e1d0b4 100644
--- a/src/components/card-detail/CardDetailModal.tsx
+++ b/src/components/card-detail/CardDetailModal.tsx
@@ -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} />