refactor: Imagem vertical no mobile na leitura de história

src/pages/student-dashboard/CreateStoryPage.tsx

@@ -151,7 +151,9 @@ export function CreateStoryPage() {
           </span>
         </div>
 
+        {/*
         <div className="mb-8 space-y-4">
+          
           <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
             <h3 className="text-sm font-medium text-purple-800 mb-3">
               Descreva sua história por voz
@@ -174,6 +176,7 @@ export function CreateStoryPage() {
               </div>
             )}
           </div>
+          
 
           <div className="flex items-center gap-4">
             <div className="flex-1 h-px bg-gray-200" />
@@ -181,6 +184,7 @@ export function CreateStoryPage() {
             <div className="flex-1 h-px bg-gray-200" />
           </div>
         </div>
+        */}
 
         <StoryGenerator
           initialContext={inputMode === 'voice' ? voiceTranscript : storyContext}

src/pages/student-dashboard/StoryPage.tsx

@@ -355,7 +355,7 @@ function ImageWithLoading({ src, alt, className }: { src: string; alt: string; c
   const [error, setError] = useState(false);
 
   return (
-    <div className="relative aspect-video bg-gray-100">
+    <div className="relative bg-gray-100 aspect-[9/16] md:aspect-video">
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center">
           <Loader2 className="w-8 h-8 text-purple-600 animate-spin" />