Improve layout by switching to stacked design

LAYOUT IMPROVEMENTS:
- Removed problematic side-by-side layout that wasn't working well
- Switched to clean stacked layout across all screen sizes
- Removed sticky positioning that was causing layout issues
- Simplified to natural top-to-bottom reading flow

BENEFITS:
- Better use of horizontal space
- Natural reading flow (passage → questions)
- No layout conflicts or z-index issues
- Consistent experience across all devices
- Cleaner, more focused design
- Better learning UX following reading patterns

The stacked layout provides a much better user experience
with natural reading flow and eliminates layout issues.

Author: rgilks

app/components/TextGenerator/ReadingPassage.tsx

@@ -38,7 +38,7 @@ const ReadingPassage = () => {
 
   return (
     <div data-testid="reading-passage" className="mb-6 lg:mb-0">
-      <div className="lg:sticky lg:top-4 lg:z-10">
+      <div>
         <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" />

app/components/TextGenerator/TextGeneratorContainer.tsx

@@ -86,19 +86,17 @@ const TextGeneratorContainer = () => {
               data-testid="generated-content"
               ref={generatedContentRef}
             >
-              <div className="flex flex-col lg:flex-row lg:gap-8 lg:items-start">
+              <div className="flex flex-col gap-6">
                 <motion.div
-                  className="lg:w-2/5 lg:sticky lg:top-4 lg:self-start lg:max-h-screen lg:overflow-y-auto"
-                  initial={{ opacity: 0, x: -20 }}
-                  animate={{ opacity: 1, x: 0 }}
+                  initial={{ opacity: 0, y: -20 }}
+                  animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.6, delay: 0.1 }}
                 >
                   <ReadingPassage />
                 </motion.div>
                 <motion.div
-                  className="lg:w-3/5 lg:pl-4 lg:min-h-0"
-                  initial={{ opacity: 0, x: 20 }}
-                  animate={{ opacity: 1, x: 0 }}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.6, delay: 0.2 }}
                 >
                   <QuizSection />