Optimize learning experience with mobile-first responsive layout

MAJOR IMPROVEMENTS:
- Responsive sticky layout: Side-by-side on desktop (passage left, question right), sticky passage on mobile
- Enhanced reading flow: Context banners, improved typography, better visual hierarchy
- Improved feedback system: 2-second think timer before showing correct answer, immediate result indicator
- Touch-friendly design: 44px minimum touch targets, optimized for mobile interaction
- Visual polish: Enhanced spacing, card elevation, gradient improvements

FEATURES:
- Mobile: Sticky passage header stays visible while scrolling through questions
- Desktop: Split view with passage always visible alongside questions
- Reading context banner: Clear instruction to read carefully before answering
- Question context banner: Visual separator and prompt for question section
- Enhanced option buttons: Better spacing, hover effects, responsive text sizing
- Think timer: 2-second delay encourages reflection before showing explanation
- Immediate feedback: Shows correct/incorrect immediately, detailed explanation after delay

MOBILE OPTIMIZATIONS:
- Touch-friendly buttons with min-height 44px
- Prevents iOS zoom on input focus (16px font-size)
- Responsive typography: Scales from mobile to desktop
- Optimized spacing and padding for all screen sizes

TRANSLATIONS:
- Added 4 new translation keys to all 16 languages:
  - readingInstruction: Guides user to read carefully
  - questionPrompt: Contextualizes the question
  - readComplete: Reading status indicator
  - reading: Reading in progress indicator

DESIGN ENHANCEMENTS:
- Upgraded container to rounded-2xl with shadow-2xl
- Gradient backgrounds from-gray-800 to-gray-900
- Better visual hierarchy with improved spacing
- Enhanced borders and visual feedback

All E2E tests passing. Optimized for learning effectiveness and mobile experience.

Author: rgilks

app/components/TextGenerator/LanguageSelector.tsx

@@ -12,7 +12,7 @@ const LanguageSelector = () => {
     useTextGeneratorStore();
 
   return (
-    <div className="bg-gradient-to-r from-gray-800 to-gray-900 rounded-xl p-6 border border-gray-700 shadow-lg mb-8">
+    <div className="bg-gradient-to-r from-gray-800 via-gray-800 to-gray-900 rounded-2xl p-6 md:p-8 border border-gray-700 shadow-xl mb-6">
       <div className="grid grid-cols-2 gap-x-4 gap-y-2">
         <label
           htmlFor="passage-language-select"

app/components/TextGenerator/QuizSection.tsx

@@ -1,10 +1,15 @@
 'use client';
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getTextDirection, useLanguage } from 'app/hooks/useLanguage';
 import useTextGeneratorStore from 'app/store/textGeneratorStore';
-import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import {
+  InformationCircleIcon,
+  QuestionMarkCircleIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+} from '@heroicons/react/24/outline';
 import type { QuizData } from 'app/domain/schemas';
 import type { Language } from 'app/domain/language';
 import { LanguageSchema } from 'app/domain/language';
@@ -45,7 +50,9 @@ const QuizOptionButton: React.FC<QuizOptionButtonProps> = ({
     key={optionKey}
     onClick={handleAsyncClick(optionKey)}
     disabled={isAnswered || isSubmittingAnswer}
-    className={`w-full text-left p-3 rounded-md border transition-colors relative ${
+    className={`w-full text-left min-h-[44px] p-4 md:p-5 rounded-lg border-2 transition-all duration-200 transform relative text-base md:text-lg touch-manipulation ${
+      !isAnswered && !isSubmittingAnswer ? 'hover:scale-[1.02] hover:shadow-lg' : ''
+    } ${
       isAnswered && feedback.correctAnswer
         ? optionKey === feedback.correctAnswer
           ? 'bg-green-900/50 border-green-700 text-green-100'
@@ -164,6 +171,16 @@ const QuizSection = () => {
     isSubmittingFeedback,
   } = useTextGeneratorStore();
   const questionLanguage = contextQuestionLanguage;
+  const [showCorrectAnswer, setShowCorrectAnswer] = useState(false);
+
+  useEffect(() => {
+    if (isAnswered) {
+      const timer = setTimeout(() => { setShowCorrectAnswer(true); }, 2000);
+      return () => { clearTimeout(timer); };
+    } else {
+      setShowCorrectAnswer(false);
+    }
+  }, [isAnswered]);
   const handleAsyncClick = useCallback(
     (answer: string) => (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
@@ -175,9 +192,18 @@ const QuizSection = () => {
     return null;
   }
   return (
-    <div className="mt-6 space-y-4" data-testid="quiz-section">
+    <div
+      className="pt-6 mt-6 border-t border-gray-700 lg:border-0 lg:pt-0 lg:mt-0 space-y-4"
+      data-testid="quiz-section"
+    >
+      <div className="mb-4 p-3 bg-purple-900/20 border border-purple-700/50 rounded-lg">
+        <p className="text-sm text-purple-200 flex items-center gap-2">
+          <QuestionMarkCircleIcon className="w-4 h-4" />
+          {t('practice.questionPrompt')}
+        </p>
+      </div>
       <h3
-        className="text-lg font-semibold text-white"
+        className="text-lg md:text-xl lg:text-2xl font-semibold text-white"
         data-testid="question-text"
         dir={getTextDirection(questionLanguage)}
       >
@@ -200,14 +226,37 @@ const QuizSection = () => {
           />
         ))}
       </div>
-      <FeedbackExplanation
-        isAnswered={isAnswered}
-        showExplanation={showExplanation}
-        feedback={feedback}
-        t={t}
-        questionLanguage={questionLanguage}
-        generatedPassageLanguage={generatedPassageLanguage}
-      />
+      {isAnswered && (
+        <div className="mt-6 space-y-4">
+          {/* Immediate result indicator */}
+          <div
+            className={`p-4 rounded-lg border-2 ${feedback.isCorrect ? 'bg-green-900/30 border-green-600' : 'bg-red-900/30 border-red-600'}`}
+          >
+            <div className="flex items-center gap-3">
+              {feedback.isCorrect ? (
+                <CheckCircleIcon className="w-6 h-6 text-green-400" />
+              ) : (
+                <XCircleIcon className="w-6 h-6 text-red-400" />
+              )}
+              <span className="text-lg font-semibold text-white">
+                {feedback.isCorrect ? t('practice.correct') : t('practice.incorrect')}
+              </span>
+            </div>
+          </div>
+
+          {/* Detailed explanation (shows after delay) */}
+          {showCorrectAnswer && (
+            <FeedbackExplanation
+              isAnswered={isAnswered}
+              showExplanation={showExplanation}
+              feedback={feedback}
+              t={t}
+              questionLanguage={questionLanguage}
+              generatedPassageLanguage={generatedPassageLanguage}
+            />
+          )}
+        </div>
+      )}
       <ProgressionFeedback />
       {isSubmittingFeedback && (
         <div className="mt-4 p-4 bg-gray-700/50 border border-gray-600 rounded-lg shadow">

app/components/TextGenerator/ReadingPassage.tsx

@@ -36,30 +36,39 @@ const ReadingPassage = () => {
   }
 
   return (
-    <div data-testid="reading-passage" className="mb-6">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center text-blue-400">
-          <BookOpenIcon className="w-5 h-5 mr-2 hidden sm:inline-flex" />
-          <span className="text-lg font-medium hidden sm:inline" data-testid="passage-title">
-            {t('practice.passageTitle')}
-          </span>
-        </div>
-        <div className="flex items-center space-x-4">
-          {hover.progressionPhase === 'credits' && (
-            <div
-              className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium text-yellow-400 bg-gray-700/50"
-              data-testid="hover-credits-display"
-              title={t('practice.hoverCreditsTooltip') || 'Hover Credits'}
-            >
-              <span>{hover.creditsAvailable}</span>
-            </div>
-          )}
-          <AudioControls />
+    <div data-testid="reading-passage" className="mb-6 lg:mb-0">
+      <div className="sticky top-0 z-10 bg-gray-900/95 backdrop-blur-sm lg:relative lg:bg-transparent lg:backdrop-blur-none pb-4 mb-4 border-b border-gray-700 lg:border-0">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center text-blue-400">
+            <BookOpenIcon className="w-5 h-5 mr-2 hidden sm:inline-flex" />
+            <span className="text-lg font-medium hidden sm:inline" data-testid="passage-title">
+              {t('practice.passageTitle')}
+            </span>
+          </div>
+          <div className="flex items-center space-x-4">
+            {hover.progressionPhase === 'credits' && (
+              <div
+                className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium text-yellow-400 bg-gray-700/50"
+                data-testid="hover-credits-display"
+                title={t('practice.hoverCreditsTooltip') || 'Hover Credits'}
+              >
+                <span>{hover.creditsAvailable}</span>
+              </div>
+            )}
+            <AudioControls />
+          </div>
         </div>
       </div>
 
+      <div className="mb-3 p-3 bg-blue-900/20 border border-blue-700/50 rounded-lg">
+        <p className="text-sm text-blue-200 flex items-center gap-2">
+          <BookOpenIcon className="w-4 h-4" />
+          {t('practice.readingInstruction')}
+        </p>
+      </div>
+
       <div
-        className="prose prose-xl prose-invert max-w-none text-gray-300 leading-relaxed"
+        className="prose prose-lg md:prose-xl prose-invert max-w-none text-gray-200 leading-relaxed md:leading-loose tracking-wide"
         data-testid="passage-text"
       >
         <div dir={getTextDirection(generatedPassageLanguage)}>

app/components/TextGenerator/TextGeneratorContainer.tsx

@@ -76,12 +76,18 @@ const TextGeneratorContainer = () => {
 
         {isContentVisible && (
           <div
-            className="bg-gray-800 rounded-xl p-4 md:p-6 border border-gray-700 shadow-lg mt-6"
+            className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-6 md:p-8 border border-gray-700 shadow-2xl mt-6"
             data-testid="generated-content"
             ref={generatedContentRef}
           >
-            <ReadingPassage />
-            <QuizSection />
+            <div className="flex flex-col lg:flex-row lg:gap-6 lg:items-start">
+              <div className="lg:w-2/5 lg:sticky lg:top-4 lg:self-start">
+                <ReadingPassage />
+              </div>
+              <div className="lg:w-3/5">
+                <QuizSection />
+              </div>
+            </div>
           </div>
         )}
 

app/globals.css

@@ -40,6 +40,13 @@ body {
   outline-offset: 2px;
 }
 
+/* Prevent zoom on focus (iOS) */
+input,
+select,
+textarea {
+  font-size: 16px;
+}
+
 /* Fade-in animation */
 @keyframes fadeIn {
   from {

public/locales/de/common.json

@@ -81,6 +81,11 @@
     "hoverCreditsTooltip": "Fahren Sie mit der Maus über Wörter oder klicken Sie darauf, um sie zu übersetzen. Credits sind begrenzt.",
     "relevantText": "Relevanter Text",
     "showExplanation": "Erklärung anzeigen",
+    "startStreak": "Starten Sie Ihre Serie mit richtigen Antworten!",
+    "readingInstruction": "Lesen Sie den Text sorgfältig, um die folgende Frage zu beantworten",
+    "questionPrompt": "Beantworten Sie diese Frage basierend auf dem obigen Text:",
+    "readComplete": "Text gelesen",
+    "reading": "Lesen...",
     "progressionFeedback": {
       "correct": "Richtig! Serie: {{streak}}/5",
       "incorrect": "Serie zurückgesetzt. Versuchen Sie es erneut!",
@@ -92,8 +97,7 @@
       "keepLearning": "Machen Sie weiter so!",
       "signInToTrack": "Melden Sie sich an, um Ihren Fortschritt zu verfolgen und Progression freizuschalten!",
       "signInCta": "Jetzt anmelden"
-    },
-    "startStreak": "Starten Sie Ihre Serie mit richtigen Antworten!"
+    }
   },
   "languages": {
     "learning": {

public/locales/el/common.json

@@ -81,6 +81,11 @@
     "hoverCreditsTooltip": "Περάστε το ποντίκι πάνω ή κάντε κλικ στις λέξεις για μετάφραση. Οι πιστώσεις είναι περιορισμένες.",
     "relevantText": "Σχετικό Κείμενο",
     "showExplanation": "Εμφάνιση Εξήγησης",
+    "startStreak": "Ξεκινήστε τη σειρά σας απαντώντας σωστά!",
+    "readingInstruction": "Διαβάστε προσεκτικά το κείμενο για να απαντήσετε στην παρακάτω ερώτηση",
+    "questionPrompt": "Με βάση το παραπάνω κείμενο, απαντήστε σε αυτή την ερώτηση:",
+    "readComplete": "Ανάγνωση ολοκληρώθηκε",
+    "reading": "Ανάγνωση...",
     "progressionFeedback": {
       "correct": "Σωστό! Σειρά: {{streak}}/5",
       "incorrect": "Η σειρά επαναφέρθηκε. Δοκιμάστε ξανά!",
@@ -92,8 +97,7 @@
       "keepLearning": "Συνεχίστε την εξαιρετική δουλειά!",
       "signInToTrack": "Συνδεθείτε για να παρακολουθήσετε την πρόοδό σας και να ξεκλειδώσετε την πρόοδο!",
       "signInCta": "Συνδεθείτε τώρα"
-    },
-    "startStreak": "Ξεκινήστε τη σειρά σας απαντώντας σωστά!"
+    }
   },
   "languages": {
     "learning": {

public/locales/en/common.json

@@ -82,6 +82,10 @@
     "relevantText": "Relevant Text",
     "showExplanation": "Show Explanation",
     "hideExplanation": "Hide Explanation",
+    "readingInstruction": "Read the passage carefully to answer the question below",
+    "questionPrompt": "Based on the passage above, answer this question:",
+    "readComplete": "Passage read",
+    "reading": "Reading...",
     "progressionFeedback": {
       "correct": "Correct! Streak: {{streak}}/5",
       "incorrect": "Streak reset. Try again!",

public/locales/es/common.json

@@ -81,6 +81,11 @@
     "hoverCreditsTooltip": "Pasa el cursor o haz clic en las palabras para traducirlas. Los créditos son limitados.",
     "relevantText": "Texto Relevante",
     "showExplanation": "Mostrar Explicación",
+    "startStreak": "¡Comienza tu racha respondiendo correctamente!",
+    "readingInstruction": "Lee el pasaje cuidadosamente para responder la pregunta a continuación",
+    "questionPrompt": "Basándote en el pasaje anterior, responde esta pregunta:",
+    "readComplete": "Pasaje leído",
+    "reading": "Leyendo...",
     "progressionFeedback": {
       "correct": "¡Correcto! Racha: {{streak}}/5",
       "incorrect": "Racha reiniciada. ¡Inténtalo de nuevo!",
@@ -92,8 +97,7 @@
       "keepLearning": "¡Sigue con el excelente trabajo!",
       "signInToTrack": "¡Inicia sesión para rastrear tu progreso y desbloquear la progresión!",
       "signInCta": "Iniciar sesión ahora"
-    },
-    "startStreak": "¡Comienza tu racha respondiendo correctamente!"
+    }
   },
   "languages": {
     "learning": {

public/locales/fil/common.json

@@ -81,6 +81,11 @@
     "hoverCreditsTooltip": "Mag-hover o mag-click sa mga salita para sa pagsasalin. Limitado ang mga kredito.",
     "relevantText": "Kaugnay na Teksto",
     "showExplanation": "Ipakita ang Paliwanag",
+    "startStreak": "Simulan ang serye mo sa pamamagitan ng pagsagot nang tama!",
+    "readingInstruction": "Basahin nang mabuti ang talata upang masagot ang tanong sa ibaba",
+    "questionPrompt": "Batay sa talata sa itaas, sagutin ang tanong na ito:",
+    "readComplete": "Nabasa na ang talata",
+    "reading": "Nagbabasa...",
     "progressionFeedback": {
       "correct": "Tama! Serye: {{streak}}/5",
       "incorrect": "Na-reset ang serye. Subukan ulit!",
@@ -92,8 +97,7 @@
       "keepLearning": "Magpatuloy sa mahusay na trabaho!",
       "signInToTrack": "Mag-sign in para i-track ang progress at i-unlock ang progression!",
       "signInCta": "Mag-sign in ngayon"
-    },
-    "startStreak": "Simulan ang serye mo sa pamamagitan ng pagsagot nang tama!"
+    }
   },
   "languages": {
     "learning": {