From d5f43cb98bb5d3f99ba8ef5282fd221bc021c26d Mon Sep 17 00:00:00 2001
From: nicholaspsmith <npsmith1990@gmail.com>
Date: Wed, 14 Jan 2026 11:53:39 -0500
Subject: [PATCH] Fix flashcard text overflow on mobile devices

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

diff --git a/components/quiz/QuizCard.tsx b/components/quiz/QuizCard.tsx
index 21e98ec..3d56da7 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] p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
+          <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">
             {/* Question Section */}
-            <div className="w-full max-w-2xl mb-6 sm:mb-8">
+            <div className="w-full max-w-2xl mb-6 sm:mb-8 flex-1 min-h-0 overflow-y-auto">
               <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"
@@ -120,7 +120,7 @@ export default function QuizCard({ flashcard, onRate, onDelete }: QuizCardProps)
                 Question
               </h2>
               <p
-                className="text-lg sm:text-xl md:text-2xl font-medium text-gray-900 dark:text-gray-100 leading-relaxed"
+                className="text-lg sm:text-xl md:text-2xl font-medium text-gray-900 dark:text-gray-100 leading-relaxed break-words"
                 aria-labelledby="flashcard-question-label"
               >
                 {flashcard.question}
@@ -143,20 +143,20 @@ 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] p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
+          <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">
             {/* Question (for context) */}
-            <div className="w-full max-w-2xl mb-6 sm:mb-8">
+            <div className="w-full max-w-2xl mb-6 sm:mb-8 flex-1 min-h-0 overflow-y-auto">
               <h2 className="text-xs sm:text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
                 Question
               </h2>
-              <p className="text-lg sm:text-xl md:text-2xl font-medium text-gray-900 dark:text-gray-100 leading-relaxed">
+              <p className="text-lg sm:text-xl md:text-2xl font-medium text-gray-900 dark:text-gray-100 leading-relaxed break-words">
                 {flashcard.question}
               </p>
             </div>
 
             {/* 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"
+              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"
               role="region"
               aria-live="polite"
             >
@@ -167,7 +167,7 @@ export default function QuizCard({ flashcard, onRate, onDelete }: QuizCardProps)
                 Answer
               </h2>
               <p
-                className="text-base sm:text-lg md:text-xl text-gray-700 dark:text-gray-300 leading-relaxed"
+                className="text-base sm:text-lg md:text-xl text-gray-700 dark:text-gray-300 leading-relaxed break-words"
                 aria-labelledby="flashcard-answer-label"
               >
                 {flashcard.answer}
diff --git a/components/study/FlashcardMode.tsx b/components/study/FlashcardMode.tsx
index 55613f2..b04df2c 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 h-[300px] [perspective:1000px]"
+        className="w-full max-w-2xl min-h-[250px] sm:min-h-[300px] max-h-[70vh] [perspective:1000px]"
         data-testid="flashcard"
       >
         {/* T006: 3D flip animation with transform-style and rotateY */}
@@ -129,12 +129,12 @@ export default function FlashcardMode({
         >
           {/* T007: Front face */}
           <div
-            className="absolute inset-0 rounded-xl shadow-lg bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 [backface-visibility:hidden] [-webkit-backface-visibility:hidden]"
+            className="absolute inset-0 rounded-xl shadow-lg bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 [backface-visibility:hidden] [-webkit-backface-visibility:hidden] overflow-hidden"
             data-testid="flashcard-front"
           >
-            <div className="flex flex-col items-center justify-center h-full p-8">
+            <div className="flex flex-col items-center justify-center h-full p-8 overflow-y-auto">
               <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">Question</p>
-              <p className="text-xl text-center text-gray-900 dark:text-gray-100 whitespace-pre-wrap">
+              <p className="text-xl text-center text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">
                 {question}
               </p>
               <p className="text-sm text-blue-600 dark:text-blue-400 mt-8">
@@ -145,12 +145,12 @@ export default function FlashcardMode({
 
           {/* T007: Back face - pre-rotated 180deg, solid background required for backface-visibility */}
           <div
-            className="absolute inset-0 rounded-xl shadow-lg bg-green-50 dark:bg-green-900 border-2 border-green-200 dark:border-green-800 [backface-visibility:hidden] [-webkit-backface-visibility:hidden] [transform:rotateY(180deg)]"
+            className="absolute inset-0 rounded-xl shadow-lg bg-green-50 dark:bg-green-900 border-2 border-green-200 dark:border-green-800 [backface-visibility:hidden] [-webkit-backface-visibility:hidden] overflow-hidden [transform:rotateY(180deg)]"
             data-testid="flashcard-back"
           >
-            <div className="flex flex-col h-full p-8">
+            <div className="flex flex-col h-full p-8 overflow-y-auto">
               <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">Answer</p>
-              <p className="text-lg text-gray-900 dark:text-gray-100 whitespace-pre-wrap">
+              <p className="text-lg text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">
                 {answer}
               </p>
             </div>