Fix visual styling issues: overlap, padding, and helper text positioning

VISUAL FIXES:
- Fixed overlapping elements by removing problematic sticky positioning on mobile
- Improved padding and spacing throughout the interface
- Removed redundant purple banner that duplicated the question text
- Enhanced button styling with better spacing and hover effects
- Improved container spacing with responsive padding

SPECIFIC CHANGES:
- ReadingPassage: Simplified sticky positioning to desktop-only (lg:sticky)
- QuizSection: Removed redundant question prompt banner, moved instruction below question
- TextGeneratorContainer: Improved gap spacing (lg:gap-8) and added left padding for quiz section
- Button styling: Increased min-height to 48px, improved hover effects, better rounded corners

LAYOUT IMPROVEMENTS:
- Desktop: Clean side-by-side layout with proper spacing
- Mobile: Stacked layout without overlapping elements
- Better visual hierarchy with improved typography and spacing
- Consistent padding and margins throughout

All E2E tests passing. Layout now clean and professional without visual issues.

Author: rgilks

app/components/TextGenerator/QuizSection.tsx

@@ -4,12 +4,7 @@ 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,
-  QuestionMarkCircleIcon,
-  CheckCircleIcon,
-  XCircleIcon,
-} from '@heroicons/react/24/outline';
+import { InformationCircleIcon, 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';
@@ -50,8 +45,8 @@ const QuizOptionButton: React.FC<QuizOptionButtonProps> = ({
     key={optionKey}
     onClick={handleAsyncClick(optionKey)}
     disabled={isAnswered || isSubmittingAnswer}
-    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' : ''
+    className={`w-full text-left min-h-[48px] p-4 md:p-5 rounded-xl border-2 transition-all duration-200 transform relative text-base md:text-lg touch-manipulation ${
+      !isAnswered && !isSubmittingAnswer ? 'hover:scale-[1.01] hover:shadow-md' : ''
     } ${
       isAnswered && feedback.correctAnswer
         ? optionKey === feedback.correctAnswer
@@ -201,20 +196,17 @@ const QuizSection = () => {
       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 className="mb-6">
+        <h3
+          className="text-lg md:text-xl lg:text-2xl font-semibold text-white mb-2"
+          data-testid="question-text"
+          dir={getTextDirection(questionLanguage)}
+        >
+          {quizData.question}
+        </h3>
+        <p className="text-sm text-gray-400">{t('practice.questionPrompt')}</p>
       </div>
-      <h3
-        className="text-lg md:text-xl lg:text-2xl font-semibold text-white"
-        data-testid="question-text"
-        dir={getTextDirection(questionLanguage)}
-      >
-        {quizData.question}
-      </h3>
-      <div className="space-y-2" data-testid="quiz-options">
+      <div className="space-y-3" data-testid="quiz-options">
         {Object.entries(quizData.options).map(([key, value], index) => (
           <QuizOptionButton
             key={key}

app/components/TextGenerator/ReadingPassage.tsx

@@ -37,7 +37,7 @@ const ReadingPassage = () => {
 
   return (
     <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="lg:sticky lg:top-4 lg:z-10">
         <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" />
@@ -58,21 +58,21 @@ const ReadingPassage = () => {
             <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="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-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)}>
-          {renderParagraphWithWordHover(quizData.paragraph, generatedPassageLanguage)}
+        <div
+          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)}>
+            {renderParagraphWithWordHover(quizData.paragraph, generatedPassageLanguage)}
+          </div>
         </div>
       </div>
 

app/components/TextGenerator/TextGeneratorContainer.tsx

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