From 4bc79d741306c979b18161b43ed08bf7bfdf636b Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Tue, 24 Mar 2026 21:36:38 +0000
Subject: [PATCH] fix(site): align models table style with providers table
 (#23531)

---
 .../ChatModelAdminPanel/ModelsSection.tsx     | 87 ++++++++++---------
 1 file changed, 45 insertions(+), 42 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
index dd4964459c..7ec777c7fb 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
@@ -15,8 +15,8 @@ import {
 import {
 	ChevronDownIcon,
 	ChevronRightIcon,
+	PinIcon,
 	PlusIcon,
-	StarIcon,
 	TriangleAlertIcon,
 } from "lucide-react";
 import type { FC, ReactNode } from "react";
@@ -248,8 +248,8 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 					)}
 				</div>
 			) : (
-				<div className="divide-y divide-border/50">
-					{modelConfigs.map((modelConfig) => {
+				<div>
+					{modelConfigs.map((modelConfig, i) => {
 						const showPricingWarning = !hasCustomPricing(
 							modelConfig.model_config,
 						);
@@ -257,44 +257,11 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 						return (
 							<div
 								key={modelConfig.id}
-								className="flex items-center gap-3.5 px-3 py-3"
+								className={cn(
+									"flex items-center gap-3.5 px-3 py-3 transition-colors hover:bg-surface-secondary/30",
+									i > 0 && "border-0 border-t border-solid border-border/50",
+								)}
 							>
-								{/* Star for default */}
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<button
-											type="button"
-											onClick={(e) => {
-												e.stopPropagation();
-												handleSetDefault(modelConfig);
-											}}
-											aria-disabled={isUpdating || modelConfig.is_default}
-											aria-label={
-												modelConfig.is_default
-													? "Default model"
-													: "Set as default model"
-											}
-											className={cn(
-												"flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-transparent border-0 p-0 transition-colors",
-												modelConfig.is_default
-													? "text-yellow-400"
-													: "cursor-pointer text-content-secondary/30 hover:text-content-secondary",
-											)}
-										>
-											<StarIcon
-												className={cn(
-													"h-4 w-4",
-													modelConfig.is_default && "fill-current",
-												)}
-											/>
-										</button>
-									</TooltipTrigger>
-									<TooltipContent side="right">
-										{modelConfig.is_default
-											? "Default model for new chats"
-											: "Set as default for new chats"}
-									</TooltipContent>
-								</Tooltip>
 								{/* Clickable row content */}
 								<button
 									type="button"
@@ -304,7 +271,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 											{ state: { pushed: true } },
 										)
 									}
-									className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 text-left transition-colors hover:opacity-80"
+									className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 text-left"
 								>
 									<ProviderIcon
 										provider={modelConfig.provider}
@@ -333,8 +300,44 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 											disabled
 										</Badge>
 									)}
-									<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
 								</button>
+								{/* Pin for default */}
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<button
+											type="button"
+											onClick={(e) => {
+												e.stopPropagation();
+												handleSetDefault(modelConfig);
+											}}
+											aria-disabled={isUpdating || modelConfig.is_default}
+											aria-label={
+												modelConfig.is_default
+													? "Default model"
+													: "Set as default model"
+											}
+											className={cn(
+												"flex shrink-0 items-center justify-center bg-transparent border-0 p-0 transition-colors",
+												modelConfig.is_default
+													? "text-content-primary"
+													: "cursor-pointer text-content-secondary/30 hover:text-content-secondary",
+											)}
+										>
+											<PinIcon
+												className={cn(
+													"h-4 w-4",
+													modelConfig.is_default && "fill-current",
+												)}
+											/>
+										</button>
+									</TooltipTrigger>
+									<TooltipContent side="left">
+										{modelConfig.is_default
+											? "Pinned as default for new chats"
+											: "Pin as default for new chats"}
+									</TooltipContent>
+								</Tooltip>
+								<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
 							</div>
 						);
 					})}