From 0f0d0b7e9a566f683fa7aea2028b40b6abe5babf Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 28 Jun 2026 12:53:21 -0700
Subject: [PATCH] fix: Resolve overlapping pointer events for secondary
 flashcard actions

---
 src/components/flashcards/FlashcardViewer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/flashcards/FlashcardViewer.tsx b/src/components/flashcards/FlashcardViewer.tsx
index 7fc9ccc..6d642a7 100644
--- a/src/components/flashcards/FlashcardViewer.tsx
+++ b/src/components/flashcards/FlashcardViewer.tsx
@@ -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={() => {