Fix: Correct avatar display in header

src/components/auth/AuthButtons.tsx

@@ -87,8 +87,15 @@ export function AuthButtons() {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-8 w-8">
-            <AvatarImage src={profile?.avatar_url || ''} alt={profile?.display_name || profile?.username || ''} />
-            <AvatarFallback>
+            <AvatarImage 
+              src={profile?.avatar_url || undefined}
+              alt={profile?.display_name || profile?.username || user.email || 'User avatar'}
+              onError={(e) => {
+                console.warn('[Avatar] Failed to load image:', profile?.avatar_url);
+                e.currentTarget.src = ''; // Force fallback
+              }}
+            />
+            <AvatarFallback className="bg-primary/10 text-primary font-medium">
               {(profile?.display_name || profile?.username || user.email || 'U').charAt(0).toUpperCase()}
             </AvatarFallback>
           </Avatar>

src/components/ui/avatar.tsx

@@ -29,7 +29,7 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground", className)}
     {...props}
   />
 ));

src/hooks/useAuth.tsx

@@ -73,6 +73,12 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
 
       // Success - update state and complete
       if (isMountedRef.current) {
+        authLog('[Auth] Profile loaded:', {
+          userId: data?.user_id,
+          username: data?.username,
+          avatar_url: data?.avatar_url,
+          avatar_image_id: data?.avatar_image_id
+        });
         setProfile(data as Profile);
         profileRetryCountRef.current = 0;
         onComplete?.();