From 4790d9788bc449951342c5a0a2120c4d40252f8b Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucasrcsantana@gmail.com>
Date: Wed, 29 Jan 2025 14:15:59 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20Ajustando=20p=C3=A1igna=20de=20leitura?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/student-dashboard/StoryPage.tsx | 63 ++++++++++++-----------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/pages/student-dashboard/StoryPage.tsx b/src/pages/student-dashboard/StoryPage.tsx
index b8279e3..d1d7abb 100644
--- a/src/pages/student-dashboard/StoryPage.tsx
+++ b/src/pages/student-dashboard/StoryPage.tsx
@@ -394,7 +394,7 @@ export function StoryPage() {
   const { session } = useSession();
   const { isUpperCase, toggleUppercase, isLoading } = useUppercasePreference(session?.user?.id);
   const { isHighlighted: isSyllablesEnabled, toggleHighlight: toggleSyllables } = useSyllables();
-  const [fontSize, setFontSize] = useState(18);
+  const [fontSize, setFontSize] = useState(24);
   const [readingSpeed, setReadingSpeed] = useState(60); // 60 palavras por minuto
   const [letterSpacing, setLetterSpacing] = useState(0);
   const [wordSpacing, setWordSpacing] = useState(0);
@@ -854,19 +854,39 @@ export function StoryPage() {
           <h1 className="text-2xl font-bold text-gray-900">{story?.title}</h1>
         </div>
 
-        {/* 3. Texto da História */}
-        <div className="border-b border-gray-200 pb-6">
-          <div 
-            className="prose max-w-none overflow-hidden"
-            style={{ 
-              fontSize: `${fontSize}px`,
-              letterSpacing: `${letterSpacing}px`,
-              wordSpacing: `${wordSpacing}px`,
-              lineHeight: lineHeight
-            }}
-          >
-            {renderHighlightedText(story?.content?.pages?.[currentPage]?.text || '')}
+       {/* 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">
+            <div 
+              className="prose max-w-none overflow-hidden"
+              style={{ 
+                fontSize: `${fontSize}px`,
+                letterSpacing: `${letterSpacing}px`,
+                wordSpacing: `${wordSpacing}px`,
+                lineHeight: lineHeight
+              }}
+            >
+              {renderHighlightedText(story?.content?.pages?.[currentPage]?.text || '')}
+            </div>
           </div>
+
+          {/* 5. Imagem da História - Coluna Direita (60%) */}
+          {!focusMode.isActive && (
+            <div className="col-span-6">
+              {story?.content?.pages?.[currentPage]?.image ? (
+                <ImageWithLoading
+                  src={story.content.pages[currentPage].image}
+                  alt={`Ilustração da página ${currentPage + 1}`}
+                  className="w-full rounded-lg"
+                />
+              ) : (
+                <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
+                  <p className="text-gray-500">Sem imagem para esta página</p>
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         {/* 4. Controles de Navegação */}
@@ -896,22 +916,7 @@ export function StoryPage() {
           </div>
         </div>
 
-        {/* 5. Imagem da História - Agora com controle de visibilidade */}
-        {!focusMode.isActive && (
-          <div className="border-b border-gray-200 pb-6">
-            {story?.content?.pages?.[currentPage]?.image ? (
-              <ImageWithLoading
-                src={story.content.pages[currentPage].image}
-                alt={`Ilustração da página ${currentPage + 1}`}
-                className="w-full rounded-lg"
-              />
-            ) : (
-              <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
-                <p className="text-gray-500">Sem imagem para esta página</p>
-              </div>
-            )}
-          </div>
-        )}
+       
 
         {/* 6. Controle de Gravação */}
         {/*