From 07d60da1c1dc9e01a6945e98da610ca96d741bc7 Mon Sep 17 00:00:00 2001
From: Susana Cardoso Ferreira <susana@coder.com>
Date: Wed, 26 Aug 2026 09:07:07 +0000
Subject: [PATCH 1/4] fix(site): standardize AI provider badge tooltips

---
 .../components/ProviderRow.stories.tsx        | 23 +++++++++++-----
 .../ProvidersPage/components/ProviderRow.tsx  | 27 ++++++++++++++-----
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
index 1458666c494..7a32fbca98f 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
@@ -84,9 +84,17 @@ export const NotSupportedInAgents: Story = {
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByText("Not supported in Agents"),
-		).toBeInTheDocument();
+		const badge = canvas.getByRole("button", {
+			name: "Not supported in Agents",
+		});
+		await expect(badge).toBeInTheDocument();
+		await userEvent.hover(badge);
+		const tooltip = await within(canvasElement.ownerDocument.body).findByRole(
+			"tooltip",
+		);
+		await expect(tooltip).toHaveTextContent(
+			"This provider works with the AI Gateway proxy but Coder Agents can't use it.",
+		);
 	},
 };
 
@@ -117,7 +125,7 @@ export const WithHostnameCollisionWarning: Story = {
 	},
 	play: async ({ canvasElement, args }) => {
 		const canvas = within(canvasElement);
-		const badge = canvas.getByText(/warning/i);
+		const badge = canvas.getByLabelText(/^Warning: Hostname/);
 		await expect(badge).toBeInTheDocument();
 		await expect(badge).toHaveAttribute(
 			"aria-label",
@@ -127,9 +135,10 @@ export const WithHostnameCollisionWarning: Story = {
 
 		// Hover shows the tooltip with the warning text.
 		await userEvent.hover(badge);
-		await expect(
-			await canvas.findByText(/api\.openai\.com/, {}, { timeout: 2000 }),
-		).toBeInTheDocument();
+		const tooltip = await within(canvasElement.ownerDocument.body).findByRole(
+			"tooltip",
+		);
+		await expect(tooltip).toHaveTextContent("api.openai.com");
 
 		// Keyboard and mouse activation must not navigate the row.
 		badge.focus();
diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
index aa71dc22410..7fa608ba1c3 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
@@ -68,18 +68,31 @@ export const ProviderRow: React.FC<ProviderRowProps> = ({
 				<div className="flex flex-wrap items-center gap-1">
 					{provider.enabled && <Badge variant="default">Enabled</Badge>}
 					{AgentsUnsupportedProviderTypes.some((t) => t === provider.type) && (
-						<Badge
-							variant="info"
-							title="This provider works with the AI Gateway proxy but Coder Agents can't use it."
-						>
-							Not supported in Agents
-						</Badge>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Badge
+									variant="info"
+									role="button"
+									tabIndex={0}
+									onClick={stopPropagation}
+									onKeyDown={stopPropagation}
+									onKeyUp={stopPropagation}
+								>
+									Not supported in Agents
+								</Badge>
+							</TooltipTrigger>
+							<TooltipContent className="max-w-xs">
+								This provider works with the AI Gateway proxy but Coder Agents
+								can't use it.
+							</TooltipContent>
+						</Tooltip>
 					)}
 					{provider.status?.warnings && provider.status.warnings.length > 0 && (
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<Badge
 									variant="warning"
+									role="button"
 									tabIndex={0}
 									aria-label={`Warning: ${provider.status.warnings.join("; ")}`}
 									onClick={stopPropagation}
@@ -89,7 +102,7 @@ export const ProviderRow: React.FC<ProviderRowProps> = ({
 									Warning
 								</Badge>
 							</TooltipTrigger>
-							<TooltipContent>
+							<TooltipContent className="max-w-xs">
 								{provider.status.warnings.map((warning) => (
 									<p key={warning}>{warning}</p>
 								))}

From 22083f93ad56c0b7e8412b0c48cf176b9a800c97 Mon Sep 17 00:00:00 2001
From: Susana Cardoso Ferreira <susana@coder.com>
Date: Wed, 26 Aug 2026 10:43:23 +0000
Subject: [PATCH 2/4] fix(site): capitalize AI Gateway Proxy tooltip

---
 .../ProvidersPage/components/ProviderRow.stories.tsx            | 2 +-
 .../AISettingsPage/ProvidersPage/components/ProviderRow.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
index 7a32fbca98f..c0357b4203f 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
@@ -93,7 +93,7 @@ export const NotSupportedInAgents: Story = {
 			"tooltip",
 		);
 		await expect(tooltip).toHaveTextContent(
-			"This provider works with the AI Gateway proxy but Coder Agents can't use it.",
+			"This provider works with the AI Gateway Proxy but Coder Agents can't use it.",
 		);
 	},
 };
diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
index 7fa608ba1c3..6a889dab7a3 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
@@ -82,7 +82,7 @@ export const ProviderRow: React.FC<ProviderRowProps> = ({
 								</Badge>
 							</TooltipTrigger>
 							<TooltipContent className="max-w-xs">
-								This provider works with the AI Gateway proxy but Coder Agents
+								This provider works with the AI Gateway Proxy but Coder Agents
 								can't use it.
 							</TooltipContent>
 						</Tooltip>

From a36d66bbab929f9cc8f0f1f4d1dcda3f73c1cade Mon Sep 17 00:00:00 2001
From: Susana Cardoso Ferreira <susana@coder.com>
Date: Wed, 26 Aug 2026 16:07:59 +0000
Subject: [PATCH 3/4] chore: address comments

---
 .../ProvidersPage/components/ProviderRow.stories.tsx  | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
index c0357b4203f..595ae8e0863 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
@@ -26,14 +26,9 @@ const meta: Meta<typeof ProviderRow> = {
 			<Table className="table-fixed" aria-label="AI providers">
 				<TableHeader>
 					<TableRow>
-						<TableHead className="w-[42%]">Name</TableHead>
-						<TableHead className="w-[38%]">Base URL</TableHead>
-						<TableHead className="w-20 text-center">
-							<span className="sr-only">Enabled</span>
-						</TableHead>
-						<TableHead className="w-12">
-							<span className="sr-only">Open provider</span>
-						</TableHead>
+						<TableHead className="w-1/3">Name</TableHead>
+						<TableHead className="w-1/3">Base URL</TableHead>
+						<TableHead className="w-22">Status</TableHead>
 					</TableRow>
 				</TableHeader>
 				<TableBody>

From 91b1b672f46467dfdf61c88d8a81226c0b833b22 Mon Sep 17 00:00:00 2001
From: Jeremy Ruppel <jeremy.ruppel@gmail.com>
Date: Wed, 26 Aug 2026 16:32:31 +0000
Subject: [PATCH 4/4] fix(site): make AI Providers table scroll horizontally

This table was table-fixed, which was overriding the base `<Table>`s overflow-auto
---
 .../pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx    | 2 +-
 .../ProvidersPage/components/ProviderRow.stories.tsx            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx b/site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx
index 10ac4c75ca7..dabc4090ea4 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx
@@ -98,7 +98,7 @@ const ProvidersPageView: React.FC<ProvidersPageViewProps> = ({
 					<ErrorAlert error={error} />
 				</div>
 			)}
-			<Table className="table-fixed" aria-label="AI providers">
+			<Table aria-label="AI providers">
 				<TableHeader>
 					<TableRow>
 						<TableHead className="w-1/3">Name</TableHead>
diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
index 595ae8e0863..b6a3fb72113 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta<typeof ProviderRow> = {
 	},
 	decorators: [
 		(Story) => (
-			<Table className="table-fixed" aria-label="AI providers">
+			<Table aria-label="AI providers">
 				<TableHeader>
 					<TableRow>
 						<TableHead className="w-1/3">Name</TableHead>