lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix layout animation blocking card clicks when reduce motion is on

Browse Source 
Skip Framer Motion layout/layoutId props on cards when reduced motion
is active. These props cause pointerEvents:none during layout
transitions, making cards unclickable for ~1s after any layout shift.
This commit is contained in:
Your Name
2026-02-16 18:38:04 +02:00
parent fe8178571d
commit 93587d681a
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/board/CardThumbnail.tsx
View File

@@ -134,14 +134,14 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick, isFocu
className={`w-full rounded-lg bg-pylon-surface shadow-sm text-left ${ className={`w-full rounded-lg bg-pylon-surface shadow-sm text-left ${
isFocused ? "ring-2 ring-pylon-accent ring-offset-2 ring-offset-pylon-column" : "" isFocused ? "ring-2 ring-pylon-accent ring-offset-2 ring-offset-pylon-column" : ""
}`} }`}
layoutId={`card-${card.id}`} layoutId={prefersReducedMotion ? undefined : `card-${card.id}`}
variants={fadeSlideUp} variants={fadeSlideUp}
initial={prefersReducedMotion ? false : "hidden"} initial={prefersReducedMotion ? false : "hidden"}
animate="visible" animate="visible"
whileHover={{ scale: 1.02, y: -2, boxShadow: "0 4px 12px oklch(0% 0 0 / 10%)" }} whileHover={{ scale: 1.02, y: -2, boxShadow: "0 4px 12px oklch(0% 0 0 / 10%)" }}
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
transition={springs.bouncy} transition={springs.bouncy}
layout layout={!prefersReducedMotion}
{...attributes} {...attributes}
{...listeners} {...listeners}
role="article" role="article"