From 3eb33e5eee5dbee4d84a744d67e2cc23bb8c324e Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Thu, 4 Dec 2025 00:13:00 -0300
Subject: [PATCH] fix(pacientes): Improved responsiveness to the 'Detalhes do
 Paciente' modal

---
 .../app/(main-routes)/pacientes/page.tsx      | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx
index aa149a4..0bb939c 100644
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@@ -539,27 +539,27 @@ export default function PacientesPage() {
               </DialogDescription>
             </DialogHeader>
             <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Nome</Label>
-                <span className="col-span-3 font-medium">{viewingPatient.full_name}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Nome</Label>
+                <span className="col-span-1 sm:col-span-3 font-medium">{viewingPatient.full_name}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">CPF</Label>
-                <span className="col-span-3">{viewingPatient.cpf}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">CPF</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.cpf}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Telefone</Label>
-                <span className="col-span-3">{viewingPatient.phone_mobile}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Telefone</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.phone_mobile}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Endereço</Label>
-                <span className="col-span-3">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Endereço</Label>
+                <span className="col-span-1 sm:col-span-3">
                   {`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
                 </span>
               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Observações</Label>
-                <span className="col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
+               <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Observações</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
               </div>
             </div>
             <DialogFooter>