From a833b7af9d608e444a5dc9bd4899ee1d87ca3759 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 17 Oct 2025 09:57:02 -0300
Subject: [PATCH] fix: use AvatarData in OAuth2AppsSettings (#20342)

**Before:**
<img width="1624" height="967" alt="Screenshot 2025-10-16 at 10 16 19"
src="https://github.com/user-attachments/assets/7b3ebf4f-4096-41b6-b8f2-f1aa94a7ac87"
/>

**After:**
<img width="1624" height="967" alt="Screenshot 2025-10-16 at 10 16 26"
src="https://github.com/user-attachments/assets/a8d25ed4-1e40-4191-8d29-396121836443"
/>
---
 .../OAuth2AppsSettingsPageView.tsx                       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
index da72549e42..3c40874ef4 100644
--- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react";
 import type * as TypesGen from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
+import { AvatarData } from "components/Avatar/AvatarData";
 import { Button } from "components/Button/Button";
 import {
 	SettingsHeader,
@@ -101,10 +102,10 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app }) => {
 	return (
 		<TableRow key={app.id} data-testid={`app-${app.id}`} {...clickableProps}>
 			<TableCell>
-				<Stack direction="row" spacing={1}>
-					<Avatar variant="icon" src={app.icon} fallback={app.name} />
-					<span className="font-semibold">{app.name}</span>
-				</Stack>
+				<AvatarData
+					avatar={<Avatar variant="icon" src={app.icon} fallback={app.name} />}
+					title={app.name}
+				/>
 			</TableCell>
 
 			<TableCell>