fix: Resolve overlapping pointer events for secondary flashcard actions
All checks were successful
Automated Container Build / build-and-push (push) Successful in 53s

This commit is contained in:
Elijah 2026-06-28 12:53:21 -07:00
parent ec9bc40bd4
commit 0f0d0b7e9a

View file

@ -401,9 +401,9 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
<div className="w-full mt-6">
{/* Primary Action Row (Grading) */}
<div className="flex items-center justify-center gap-4 min-h-[52px] mb-4 relative z-20">
<div className={`flex items-center justify-center gap-4 min-h-[52px] mb-4 relative z-10 ${!hasFlippedOnce ? 'pointer-events-none' : ''}`}>
{hasFlippedOnce && (
<div className="flex items-center gap-2 md:gap-4 animate-fade-in">
<div className="flex items-center gap-2 md:gap-4 animate-fade-in pointer-events-auto">
<button
onClick={() => gradeCard("missed")}
className="flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-error/30 text-error font-medium hover:bg-error-bg transition-all duration-200 cursor-pointer bg-bg-base/80 backdrop-blur"
@ -427,7 +427,7 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
</div>
{/* Secondary Action Row (Navigation/Settings) */}
<div className={`flex items-center justify-between w-full px-2 transition-all duration-300 relative z-10 ${!hasFlippedOnce ? '-mt-[68px]' : ''}`}>
<div className={`flex items-center justify-between w-full px-2 transition-all duration-300 relative z-20 ${!hasFlippedOnce ? '-mt-[68px]' : ''}`}>
{currentIndex > 0 ? (
<button
onClick={() => {