From d1b2ac4eefcf6a7f3afde0696b88c884c1e040e6 Mon Sep 17 00:00:00 2001
From: Gabriel Menezes <gabrielufmscc@gmail.com>
Date: Sat, 10 Oct 2026 23:03:29 -0400
Subject: [PATCH] fix(avatar): ensure user photo is clipped strictly inside
 circular container in Header and Profile

---
 new-frontend/src/components/layout/Header.tsx | 24 ++++++++++---------
 new-frontend/src/pages/ProfilePage.tsx        | 14 +++++++++--
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/new-frontend/src/components/layout/Header.tsx b/new-frontend/src/components/layout/Header.tsx
index 5b9a6aa..9cdbb8d 100644
--- a/new-frontend/src/components/layout/Header.tsx
+++ b/new-frontend/src/components/layout/Header.tsx
@@ -5,9 +5,6 @@ import {
   Button,
   Chip,
   ChipLabel,
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
 } from '@heroui/react'
 import {
   Building2,
@@ -217,17 +214,22 @@ export const Header = ({ onToggleMobileSidebar }: HeaderProps) => {
               setShowUserDropdown(!showUserDropdown)
               setShowOrgDropdown(false)
             }}
-            className="flex items-center gap-2 p-1 rounded-full hover:ring-2 hover:ring-brand/30 transition-all"
+            className="flex items-center gap-2 p-0.5 rounded-full hover:ring-2 hover:ring-brand/30 transition-all focus:outline-none"
             aria-label="Menu do usuário"
           >
-            <Avatar className="w-9 h-9 rounded-full ring-2 ring-border-soft">
+            <div className="w-9 h-9 rounded-full overflow-hidden border border-border bg-surface-raised flex items-center justify-center shrink-0">
               {user?.photo ? (
-                <AvatarImage src={user.photo} alt={user.name} />
-              ) : null}
-              <AvatarFallback className="bg-brand-soft text-brand font-bold text-xs">
-                {userInitials}
-              </AvatarFallback>
-            </Avatar>
+                <img
+                  src={user.photo}
+                  alt={user.name || 'Avatar'}
+                  className="w-full h-full object-cover rounded-full"
+                />
+              ) : (
+                <span className="w-full h-full bg-brand/15 text-brand font-bold text-xs flex items-center justify-center uppercase select-none">
+                  {userInitials}
+                </span>
+              )}
+            </div>
           </button>
 
           {/* User Dropdown Menu */}
diff --git a/new-frontend/src/pages/ProfilePage.tsx b/new-frontend/src/pages/ProfilePage.tsx
index 9d8d8d9..bfe5b1e 100644
--- a/new-frontend/src/pages/ProfilePage.tsx
+++ b/new-frontend/src/pages/ProfilePage.tsx
@@ -62,8 +62,18 @@ export const ProfilePage: React.FC = () => {
       <div className="rounded-2xl border border-border bg-surface p-6 shadow-xs space-y-6">
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border">
           <div className="flex items-center gap-4">
-            <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand to-teal-700 border-2 border-brand/40 flex items-center justify-center text-white font-extrabold text-2xl shadow-lg shadow-brand/20">
-              {user.name ? user.name.charAt(0).toUpperCase() : user.email.charAt(0).toUpperCase()}
+            <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-brand/40 bg-gradient-to-br from-brand to-teal-700 flex items-center justify-center text-white font-extrabold text-2xl shadow-lg shadow-brand/20 shrink-0">
+              {user.photo ? (
+                <img
+                  src={user.photo}
+                  alt={user.name || 'Avatar'}
+                  className="w-full h-full object-cover rounded-full"
+                />
+              ) : user.name ? (
+                user.name.charAt(0).toUpperCase()
+              ) : (
+                user.email.charAt(0).toUpperCase()
+              )}
             </div>
             <div>
               <h2 className="text-lg font-bold text-foreground">{user.name || 'Usuário'}</h2>