From bb776db1a390d1e69d554c3d6f84ae4837e96036 Mon Sep 17 00:00:00 2001
From: nicholaspsmith <npsmith1990@gmail.com>
Date: Wed, 14 Jan 2026 12:45:19 -0500
Subject: [PATCH] Fix flashcard visibility regression on mobile

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/quiz/QuizCard.tsx       | 10 +++++-----
 components/study/FlashcardMode.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/quiz/QuizCard.tsx b/components/quiz/QuizCard.tsx
index 3d56da7..066f493 100644
--- a/components/quiz/QuizCard.tsx
+++ b/components/quiz/QuizCard.tsx
@@ -110,9 +110,9 @@ export default function QuizCard({ flashcard, onRate, onDelete }: QuizCardProps)
       <div className={`flip-card-inner ${isAnswerRevealed ? 'flipped' : ''}`}>
         {/* Front Face - Question Only */}
         <div className="flip-card-front">
-          <div className="flex flex-col items-center justify-center min-h-[300px] sm:min-h-[400px] max-h-[70vh] p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-y-auto">
+          <div className="flex flex-col items-center justify-center min-h-[300px] sm:min-h-[400px] p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-y-auto">
             {/* Question Section */}
-            <div className="w-full max-w-2xl mb-6 sm:mb-8 flex-1 min-h-0 overflow-y-auto">
+            <div className="w-full max-w-2xl mb-6 sm:mb-8">
               <h2
                 id="flashcard-question-label"
                 className="text-xs sm:text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"
@@ -143,9 +143,9 @@ export default function QuizCard({ flashcard, onRate, onDelete }: QuizCardProps)
 
         {/* Back Face - Question + Answer + Rating */}
         <div className="flip-card-back">
-          <div className="flex flex-col items-center justify-center min-h-[300px] sm:min-h-[400px] max-h-[70vh] p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-y-auto">
+          <div className="flex flex-col items-center justify-center min-h-[300px] sm:min-h-[400px] p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-y-auto">
             {/* Question (for context) */}
-            <div className="w-full max-w-2xl mb-6 sm:mb-8 flex-1 min-h-0 overflow-y-auto">
+            <div className="w-full max-w-2xl mb-6 sm:mb-8">
               <h2 className="text-xs sm:text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                 Question
               </h2>
@@ -156,7 +156,7 @@ export default function QuizCard({ flashcard, onRate, onDelete }: QuizCardProps)
 
             {/* Answer Section */}
             <div
-              className="w-full max-w-2xl mb-6 sm:mb-8 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700 flex-1 min-h-0 overflow-y-auto"
+              className="w-full max-w-2xl mb-6 sm:mb-8 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700"
               role="region"
               aria-live="polite"
             >
diff --git a/components/study/FlashcardMode.tsx b/components/study/FlashcardMode.tsx
index b04df2c..07ea5d9 100644
--- a/components/study/FlashcardMode.tsx
+++ b/components/study/FlashcardMode.tsx
@@ -117,7 +117,7 @@ export default function FlashcardMode({
       {/* Card - T005: Perspective wrapper with key to reset on card change */}
       <div
         key={cardNumber}
-        className="w-full max-w-2xl min-h-[250px] sm:min-h-[300px] max-h-[70vh] [perspective:1000px]"
+        className="w-full max-w-2xl h-[250px] sm:h-[300px] [perspective:1000px]"
         data-testid="flashcard"
       >
         {/* T006: 3D flip animation with transform-style and rotateY */}