fix: consistent UserAvatar styling across all pages

The non-clickable UserAvatar (create/edit pages) rendered as a plain
<span>, while the clickable variant (list page) rendered as a PF6
Button. This caused inconsistent visual placement inside
ListPageHeader. Always render a Button variant="link", using
isAriaDisabled to prevent interaction on non-clickable pages.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Matej Vašek <matejvasek@gmail.com>

Author: matejvasek

src/components/UserAvatar.test.tsx

@@ -41,9 +41,16 @@ describe('UserAvatar', () => {
     expect(onClick).toHaveBeenCalled();
   });
 
-  it('non-clickable does not render button role', () => {
-    render(<UserAvatar user={null} isClickable={false} onClick={jest.fn()} />);
+  it('non-clickable renders as aria-disabled button that does not call onClick', async () => {
+    const u = userEvent.setup();
+    const onClick = jest.fn();
+
+    render(<UserAvatar user={null} isClickable={false} onClick={onClick} />);
+
+    const button = screen.getByRole('button', { name: 'Connect to GitHub' });
+    expect(button).toHaveAttribute('aria-disabled', 'true');
 
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    await u.click(button);
+    expect(onClick).not.toHaveBeenCalled();
   });
 });

src/components/UserAvatar.tsx

@@ -15,17 +15,15 @@ export function UserAvatar({ user, isClickable, onClick }: UserAvatarProps) {
   const icon = user ? <UserIcon /> : <KeyIcon />;
   const label = user ? user.login : t('Connect to GitHub');
 
-  if (isClickable) {
-    return (
-      <Button variant="link" onClick={onClick} icon={icon}>
-        {label}
-      </Button>
-    );
-  }
-
   return (
-    <span>
-      {icon} {label}
-    </span>
+    <Button
+      variant="link"
+      icon={icon}
+      onClick={isClickable ? onClick : undefined}
+      isAriaDisabled={!isClickable}
+      style={!isClickable ? { cursor: 'default' } : undefined}
+    >
+      {label}
+    </Button>
   );
 }