Fix speaker voice dropdown overlap issue

DROPDOWN OVERLAP FIX:
- Fixed z-index hierarchy to prevent voice selector dropdown from overlapping question text
- Set VoiceSelector to z-[100] to ensure it appears above all other content
- Set AudioControls container to z-[90] for proper layering
- Added proper overflow handling to reading passage container
- Ensured quiz section has lower z-index (z-10) to prevent conflicts

LAYOUT IMPROVEMENTS:
- Added max-height and overflow-y-auto to reading passage for better containment
- Added min-h-0 to quiz section to prevent layout issues
- Improved sticky positioning to prevent content overlap

The voice selector dropdown now properly appears above all content without
overlapping the question text or interfering with user interactions.

Author: rgilks

app/components/TextGenerator/AudioControls.tsx

@@ -25,7 +25,7 @@ const AudioControls = () => {
   if (availableVoices.length === 0) return null;
 
   return (
-    <div className="flex items-center space-x-3">
+    <div className="flex items-center space-x-3 relative z-[90]">
       <PlayPauseButton
         isSpeakingPassage={isSpeakingPassage}
         isPaused={isPaused}

app/components/TextGenerator/QuizSection.tsx

@@ -222,7 +222,7 @@ const QuizSection = () => {
   }
   return (
     <div
-      className="pt-6 mt-6 border-t border-gray-700 lg:border-0 lg:pt-0 lg:mt-0 space-y-4"
+      className="pt-6 mt-6 border-t border-gray-700 lg:border-0 lg:pt-0 lg:mt-0 space-y-4 relative z-10"
       data-testid="quiz-section"
     >
       <div className="mb-6">

app/components/TextGenerator/TextGeneratorContainer.tsx

@@ -88,15 +88,15 @@ const TextGeneratorContainer = () => {
             >
               <div className="flex flex-col lg:flex-row lg:gap-8 lg:items-start">
                 <motion.div
-                  className="lg:w-2/5 lg:sticky lg:top-4 lg:self-start"
+                  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 }}
                   transition={{ duration: 0.6, delay: 0.1 }}
                 >
                   <ReadingPassage />
                 </motion.div>
                 <motion.div
-                  className="lg:w-3/5 lg:pl-4"
+                  className="lg:w-3/5 lg:pl-4 lg:min-h-0"
                   initial={{ opacity: 0, x: 20 }}
                   animate={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.6, delay: 0.2 }}

app/components/TextGenerator/VoiceSelector.tsx

@@ -27,14 +27,14 @@ const VoiceSelector = ({
     );
   }
   return (
-    <div className="relative">
+    <div className="relative z-[100]">
       <select
         data-testid="voice-select"
         value={selectedVoiceURI || ''}
         onChange={(e) => {
           setSelectedVoiceURI(e.target.value);
         }}
-        className="appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 pl-3 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600 focus:border-gray-500 text-sm cursor-pointer max-w-[150px] truncate"
+        className="appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 pl-3 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600 focus:border-gray-500 text-sm cursor-pointer max-w-[150px] truncate relative z-[100]"
         title={t('common.selectVoice')}
       >
         {availableVoices.map((voice) => (
@@ -43,7 +43,7 @@ const VoiceSelector = ({
           </option>
         ))}
       </select>
-      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400 z-[100]">
         <ChevronDownIcon className="w-4 h-4" />
       </div>
     </div>