From 9f7ea648fe921b3b04c6b629231b401e82b20072 Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucasrcsantana@gmail.com>
Date: Wed, 29 Jan 2025 14:22:35 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20Ajustando=20visualiza=C3=A7=C3=A3o=20da?=
 =?UTF-8?q?=20p=C3=A1gina=20de=20leitura=20de=20hist=C3=B3ria?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/student-dashboard/StoryPage.tsx | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/pages/student-dashboard/StoryPage.tsx b/src/pages/student-dashboard/StoryPage.tsx
index 3ae28eb..7a98745 100644
--- a/src/pages/student-dashboard/StoryPage.tsx
+++ b/src/pages/student-dashboard/StoryPage.tsx
@@ -854,10 +854,10 @@ export function StoryPage() {
           <h1 className="text-2xl font-bold text-gray-900">{story?.title}</h1>
         </div>
 
-       {/* Container de duas colunas */}
-        <div className="grid grid-cols-10 gap-6 border-b border-gray-200 pb-6">
-          {/* 3. Texto da História - Coluna Esquerda (40%) */}
-          <div className="col-span-4">
+       {/* Container responsivo */}
+        <div className="grid grid-cols-1 md:grid-cols-10 gap-6 border-b border-gray-200 pb-6">
+          {/* 3. Texto da História - Coluna Esquerda (40% em desktop) */}
+          <div className="col-span-1 md:col-span-4">
             <div 
               className="prose max-w-none overflow-hidden"
               style={{ 
@@ -871,9 +871,9 @@ export function StoryPage() {
             </div>
           </div>
 
-          {/* 5. Imagem da História - Coluna Direita (60%) */}
+          {/* 5. Imagem da História - Coluna Direita (60% em desktop) */}
           {!focusMode.isActive && (
-            <div className="col-span-6">
+            <div className="col-span-1 md:col-span-6">
               {story?.content?.pages?.[currentPage]?.image ? (
                 <ImageWithLoading
                   src={story.content.pages[currentPage].image}
@@ -891,26 +891,28 @@ export function StoryPage() {
 
         {/* 4. Controles de Navegação */}
         <div className="border-b border-gray-200 pb-6">
-          <div className="flex justify-between items-center">
+          <div className="flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-2">
             <button
               onClick={() => setCurrentPage(prev => prev - 1)}
               disabled={currentPage === 0}
-              className="flex items-center gap-2 px-4 py-2 text-purple-600 border border-purple-600 rounded-md hover:bg-purple-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 text-purple-600 border border-purple-600 rounded-md hover:bg-purple-50 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <ArrowLeft className="h-5 w-5" />
-              Página Anterior
+              <span className="hidden sm:inline">Página Anterior</span>
+              <span className="sm:hidden">Anterior</span>
             </button>
 
-            <span className="text-sm text-gray-500">
+            <span className="text-sm text-gray-500 order-first sm:order-none">
               Página {currentPage + 1} de {story?.content?.pages?.length}
             </span>
 
             <button
               onClick={() => setCurrentPage(prev => prev + 1)}
               disabled={currentPage === (story?.content?.pages?.length ?? 0) - 1}
-              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              Próxima Página
+              <span className="hidden sm:inline">Próxima Página</span>
+              <span className="sm:hidden">Próxima</span>
               <ArrowRight className="h-5 w-5" />
             </button>
           </div>