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, Button,
Chip, Chip,
ChipLabel, ChipLabel,
Avatar,
AvatarFallback,
AvatarImage,
} from '@heroui/react' } from '@heroui/react'
import { import {
Building2, Building2,
@ -217,17 +214,22 @@ export const Header = ({ onToggleMobileSidebar }: HeaderProps) => {
setShowUserDropdown(!showUserDropdown) setShowUserDropdown(!showUserDropdown)
setShowOrgDropdown(false) 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" 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 ? ( {user?.photo ? (
<AvatarImage src={user.photo} alt={user.name} /> <img
) : null} src={user.photo}
<AvatarFallback className="bg-brand-soft text-brand font-bold text-xs"> 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} {userInitials}
</AvatarFallback> </span>
</Avatar> )}
</div>
</button> </button>
{/* User Dropdown Menu */} {/* 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="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 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="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"> <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.name ? user.name.charAt(0).toUpperCase() : user.email.charAt(0).toUpperCase()} {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>
<div> <div>
<h2 className="text-lg font-bold text-foreground">{user.name || 'Usuário'}</h2> <h2 className="text-lg font-bold text-foreground">{user.name || 'Usuário'}</h2>