update

src/components/auth/AuthButtons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { UserAvatar } from '@/components/ui/user-avatar';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { User, Settings, LogOut } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
@@ -71,6 +71,7 @@ export function AuthButtons() {
   return <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+<<<<<<< HEAD
           <Avatar className="h-8 w-8" key={profile?.avatar_url || 'fallback'}>
             <AvatarImage 
               src={profile?.avatar_url || undefined}
@@ -83,6 +84,14 @@ export function AuthButtons() {
               {(profile?.display_name || profile?.username || user.email || 'U').charAt(0).toUpperCase()}
             </AvatarFallback>
           </Avatar>
+=======
+          <UserAvatar 
+            key={profile?.avatar_url || 'no-avatar'}
+            avatarUrl={profile?.avatar_url}
+            fallbackText={profile?.display_name || profile?.username || user.email || 'U'}
+            size="sm"
+          />
+>>>>>>> b91d798 (Improve user avatar display to ensure consistency and reliability)
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>