From 37b38642715e5c217c7b8d219688241362ae31ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Thu, 13 Nov 2025 18:02:37 -0300
Subject: [PATCH] fix-patient-page

---
 susconecta/app/paciente/page.tsx                   | 14 ++++++++------
 .../app/paciente/resultados/ResultadosClient.tsx   |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index 54f0317..16aaab4 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@@ -482,7 +482,8 @@ export default function PacientePage() {
           }
           
           console.log('[DashboardCards] Especialidades encontradas:', specs)
-          setEspecialidades(specs.length > 0 ? specs.sort() : [])
+          // Ordenação alfabética usando localeCompare para suportar acentuação (português)
+          setEspecialidades(specs.length > 0 ? specs.sort((a, b) => a.localeCompare(b, 'pt', { sensitivity: 'base' })) : [])
         } catch (e) {
           console.error('[DashboardCards] erro ao carregar especialidades', e)
           if (mounted) setEspecialidades([])
@@ -574,20 +575,21 @@ export default function PacientePage() {
             <div className="space-y-3 sm:space-y-4">
               <p className="text-sm sm:text-base font-semibold opacity-90">Especialidades populares</p>
               {especialidadesLoading ? (
-                <div className="flex gap-2 flex-wrap">
+                <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-2">
                   {[1, 2, 3, 4, 5, 6].map((i) => (
-                    <div key={i} className="h-10 w-24 bg-white/20 rounded-full animate-pulse"></div>
+                    <div key={i} className="h-12 w-full bg-white/20 rounded-full animate-pulse" />
                   ))}
                 </div>
               ) : especialidades && especialidades.length > 0 ? (
-                <div className="flex flex-wrap gap-2 sm:gap-3">
+                // Grid responsivo com botões arredondados e tamanho uniforme
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 sm:gap-3">
                   {especialidades.map((esp) => (
                     <button
                       key={esp}
                       onClick={() => handleEspecialidadeClick(esp)}
-                      className="px-4 sm:px-5 py-2 sm:py-2.5 rounded-full bg-white/20 hover:bg-white/30 text-white font-medium text-xs sm:text-sm transition-colors border border-white/30 whitespace-nowrap"
+                      className="w-full min-h-[44px] sm:min-h-[48px] flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white font-medium text-sm transition-colors border border-white/20 px-3 py-2 text-center break-words"
                     >
-                      {esp}
+                      <span className="leading-tight">{esp}</span>
                     </button>
                   ))}
                 </div>
diff --git a/susconecta/app/paciente/resultados/ResultadosClient.tsx b/susconecta/app/paciente/resultados/ResultadosClient.tsx
index 223f21a..d90f6c1 100644
--- a/susconecta/app/paciente/resultados/ResultadosClient.tsx
+++ b/susconecta/app/paciente/resultados/ResultadosClient.tsx
@@ -687,7 +687,7 @@ export default function ResultadosClient() {
 
   // Paginação local para a lista de médicos
   const [currentPage, setCurrentPage] = useState(1)
-  const [itemsPerPage, setItemsPerPage] = useState(100)
+  const [itemsPerPage, setItemsPerPage] = useState(5)
 
   // Resetar para página 1 quando o conjunto de profissionais (filtro) ou itemsPerPage mudar
   useEffect(() => {