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 1458666c494..b6a3fb72113 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
@@ -23,17 +23,12 @@ 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-[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>
@@ -84,9 +79,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 +120,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 +130,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..6a889dab7a3 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>
 								))}