fix: Corrigindo responsividade

CHANGELOG.md

@@ -181,3 +181,23 @@ e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/).
 - Implementada validação de idioma antes da geração
 - Atualizado payload da Edge Function para incluir `language_type`
 - Melhorada tipagem para suporte a múltiplos idiomas
+
+## [1.4.0] - 2024-01-31
+
+### Adicionado
+- Integração completa com a tabela `languages` do banco de dados
+- Suporte para ícones de bandeira nos seletores de idioma
+- Instruções específicas por idioma na interface
+- Hook `useLanguages` para gerenciamento centralizado de idiomas
+
+### Modificado
+- Removido `LANGUAGE_OPTIONS` hard coded do `StoryGenerator`
+- Atualizado `CreateStoryPage` para usar `DEFAULT_LANGUAGE` do type
+- Melhorada a validação de idiomas usando dados do banco
+- Aprimorada a UX do seletor de idiomas com ícones e instruções
+
+### Técnico
+- Refatorado o sistema de idiomas para usar dados dinâmicos do banco
+- Adicionada tipagem forte para dados de idioma
+- Implementada validação robusta de códigos de idioma
+- Melhorada a estrutura de componentes para suportar dados dinâmicos

src/pages/student-dashboard/StudentDashboardPage.tsx

@@ -128,10 +128,10 @@ export function StudentDashboardPage() {
   return (
     <div>
       {/* Cabeçalho */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
-        <div className="flex justify-between items-start">
-          <div className="flex items-center gap-4">
-            <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center">
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-8">
+        <div className="flex flex-col sm:flex-row justify-between items-center sm:items-start gap-4 sm:gap-0">
+          <div className="flex flex-col sm:flex-row items-center sm:items-center gap-4 text-center sm:text-left">
+            <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
               {student?.avatar_url ? (
                 <img
                   src={student.avatar_url}
@@ -145,18 +145,18 @@ export function StudentDashboardPage() {
               )}
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-gray-900">{student?.name}</h1>
-              <p className="text-xs text-gray-500 truncate">
+              <h1 className="text-xl sm:text-2xl font-bold text-gray-900">{student?.name}</h1>
+              <p className="text-xs text-gray-500 truncate max-w-[250px] sm:max-w-none">
                 {student?.class?.name} - {student?.class?.grade} • {student?.school?.name}
               </p>
             </div>
           </div>
           <button
             onClick={() => navigate('/aluno/historias/nova')}
-            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
+            className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
           >
             <Plus className="h-5 w-5" />
-            Nova História
+            <span>Nova História</span>
           </button>
         </div>
       </div>