From 0eb7fd7171e71b51fdfe2666b2c6ab06244ff9e2 Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Wed, 3 Dec 2025 22:40:47 -0300
Subject: [PATCH] fix: responsiveness of the "Foto do Perfil" card profile page

---
 susconecta/app/paciente/page.tsx           |  2 +-
 susconecta/components/ui/upload-avatar.tsx | 28 ++++++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index 1e7bb6a..a3e7245 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@@ -1889,7 +1889,7 @@ export default function PacientePage() {
               <h3 className="text-base sm:text-lg md:text-lg font-semibold mb-3 sm:mb-4">Foto do Perfil</h3>
 
               {isEditingProfile ? (
-                <div className="space-y-3 sm:space-y-4">
+                <div className="flex justify-center">
                   <UploadAvatar
                     userId={profileData.id}
                     currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
diff --git a/susconecta/components/ui/upload-avatar.tsx b/susconecta/components/ui/upload-avatar.tsx
index 11305a2..e066237 100644
--- a/susconecta/components/ui/upload-avatar.tsx
+++ b/susconecta/components/ui/upload-avatar.tsx
@@ -74,26 +74,28 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
     : 'U'
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-4">
-        <Avatar className="h-20 w-20">
+    <div className="w-full flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
+      <div className="flex-shrink-0">
+        <Avatar className="h-20 w-20 sm:h-20 sm:w-20">
           <AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} />
           <AvatarFallback className="text-lg">
             {initials}
           </AvatarFallback>
         </Avatar>
+      </div>
 
-        <div className="space-y-2">
-          <div className="flex gap-2">
+      <div className="flex-1 w-full min-w-0">
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2 flex-wrap">
             <Button
               variant="outline"
               size="sm"
               onClick={() => document.getElementById('avatar-upload')?.click()}
               disabled={isUploading}
-              className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
+              className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
             >
-              <Upload className="h-4 w-4 mr-2" />
-              {isUploading ? 'Enviando...' : 'Upload'}
+              <Upload className="h-4 w-4 mr-1 sm:mr-2" />
+              <span className="hidden xs:inline">{isUploading ? 'Enviando...' : 'Upload'}</span>
             </Button>
 
             {currentAvatarUrl && (
@@ -101,10 +103,10 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
                 variant="outline"
                 size="sm"
                 onClick={handleDownload}
-                className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
+                className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
               >
-                <Download className="h-4 w-4 mr-2" />
-                Download
+                <Download className="h-4 w-4 mr-1 sm:mr-2" />
+                <span className="hidden xs:inline">Download</span>
               </Button>
             )}
           </div>
@@ -118,8 +120,8 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
             disabled={isUploading}
           />
 
-          <p className="text-xs text-muted-foreground">
-            Formatos aceitos: JPG, PNG, WebP (máx. 2MB)
+          <p className="text-xs text-muted-foreground leading-snug">
+            Formatos: JPG, PNG, WebP (máx. 2MB)
           </p>
           
           {error && (