gabriel/beetask
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(avatar): ensure user photo is clipped strictly inside circular container in Header and Profile

Browse source
This commit is contained in:
Gabriel Menezes 2026-10-10 23:03:29 -04:00
parent 5c32665b55
commit d1b2ac4eef
2 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
new-frontend/src/components/layout/Header.tsx
View file

@ -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">
<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}
</AvatarFallback>
</Avatar>
</span>
)}
</div>
</button>
{/* User Dropdown Menu */}

14
new-frontend/src/pages/ProfilePage.tsx
View file

@ -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>