feat(site): add TableBody size="lg" variant for 72px rows (#26687)

Add a new variant `size="lg"` for the `Table` component, and make use of
it in the new AI settings page. This allows us to ensure each table is
using the same implementation and are consistent.

site/src/components/Table/Table.stories.tsx

@@ -114,3 +114,32 @@ export const ScopeOverride: Story = {
 		expect(invoiceHeader).toHaveAttribute("scope", "row");
 	},
 };
+
+export const SizeLarge: Story = {
+	args: {
+		children: (
+			<>
+				<TableHeader>
+					<TableRow>
+						<TableHead className="w-[100px]">Invoice</TableHead>
+						<TableHead>Status</TableHead>
+						<TableHead>Method</TableHead>
+						<TableHead className="text-right">Amount</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody size="lg">
+					{invoices.map((invoice) => (
+						<TableRow key={invoice.invoice}>
+							<TableCell className="font-medium">{invoice.invoice}</TableCell>
+							<TableCell>{invoice.paymentStatus}</TableCell>
+							<TableCell>{invoice.paymentMethod}</TableCell>
+							<TableCell className="text-right">
+								{invoice.totalAmount}
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</>
+		),
+	},
+};

site/src/components/Table/Table.tsx

@@ -34,8 +34,20 @@ export const TableHeader: React.FC<React.ComponentPropsWithRef<"thead">> = ({
 	return <thead className={cn("[&_td]:border-none", className)} {...props} />;
 };
 
-export const TableBody: React.FC<React.ComponentPropsWithRef<"tbody">> = ({
+const tableBodyVariants = cva(null, {
+	variants: {
+		size: {
+			lg: "[&>tr>td]:box-border [&>tr>td]:h-[72px]",
+		},
+	},
+});
+
+type TableBodyProps = React.ComponentPropsWithRef<"tbody"> &
+	VariantProps<typeof tableBodyVariants>;
+
+export const TableBody: React.FC<TableBodyProps> = ({
 	className,
+	size,
 	...props
 }) => {
 	return (
@@ -45,6 +57,7 @@ export const TableBody: React.FC<React.ComponentPropsWithRef<"tbody">> = ({
 				"[&>tr:last-child>td]:border-b [&>tr>td:last-child]:border-r",
 				"[&>tr:first-of-type>td:first-of-type]:rounded-tl-md [&>tr:first-of-type>td:last-child]:rounded-tr-md",
 				"[&>tr:last-child>td:first-of-type]:rounded-bl-md [&>tr:last-child>td:last-child]:rounded-br-md",
+				tableBodyVariants({ size }),
 				className,
 			)}
 			{...props}

site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx

@@ -85,7 +85,7 @@ export const GatewayKeysPageView: FC<GatewayKeysPageViewProps> = ({
 							<TableHead className="w-8" />
 						</TableRow>
 					</TableHeader>
-					<TableBody>
+					<TableBody size="lg">
 						{isLoading ? (
 							<TableLoader />
 						) : error ? (

site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx

@@ -67,7 +67,7 @@ const MCPServersPageView: FC<MCPServersPageViewProps> = ({
 						</TableHead>
 					</TableRow>
 				</TableHeader>
-				<TableBody>
+				<TableBody size="lg">
 					{isLoading ? (
 						<TableLoader />
 					) : !error && servers.length === 0 ? (

site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx

@@ -19,7 +19,7 @@ export const MCPServerRow: FC<MCPServerRowProps> = ({ server, onClick }) => {
 
 	return (
 		<TableRow {...clickableProps}>
-			<TableCell className="h-[72px] w-1/2">
+			<TableCell className="min-w-0 px-4 py-3">
 				<div className="flex min-w-0 items-center gap-3">
 					<MCPServerIcon
 						iconUrl={server.icon_url}

site/src/pages/AISettingsPage/ModelsPage/ModelsPageView.tsx

@@ -134,7 +134,7 @@ const ModelsPageView: FC<ModelsPageViewProps> = ({
 						</TableHead>
 					</TableRow>
 				</TableHeader>
-				<TableBody>
+				<TableBody size="lg">
 					{isLoading ? (
 						<TableLoader />
 					) : models.length === 0 ? (

site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx

@@ -6,7 +6,6 @@ import { Badge } from "#/components/Badge/Badge";
 import { TableCell, TableRow } from "#/components/Table/Table";
 import { useClickableTableRow } from "#/hooks/useClickableTableRow";
 import { ProviderIcon } from "#/pages/AISettingsPage/ProvidersPage/components/ProviderIcon";
-import { cn } from "#/utils/cn";
 
 type ModelRowProps = {
 	model: ChatModelConfig;
@@ -30,11 +29,8 @@ export const ModelRow: FC<ModelRowProps> = ({
 	const displayName = model.display_name || model.model;
 
 	return (
-		<TableRow
-			{...clickableProps}
-			className={cn(clickableProps.className, "h-[72px]")}
-		>
-			<TableCell className="min-w-0 p-4">
+		<TableRow {...clickableProps}>
+			<TableCell className="min-w-0 px-4 py-3">
 				<div className="flex min-w-0 items-center gap-4">
 					<Avatar
 						size="lg"

site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx

@@ -106,7 +106,7 @@ const ProvidersPageView: React.FC<ProvidersPageViewProps> = ({
 						<TableHead className="w-22">Status</TableHead>
 					</TableRow>
 				</TableHeader>
-				<TableBody>
+				<TableBody size="lg">
 					{isLoading || isFetching ? (
 						<TableLoader />
 					) : providers.length === 0 ? (

site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx

@@ -24,7 +24,7 @@ export const ProviderRow: React.FC<ProviderRowProps> = ({
 
 	return (
 		<TableRow key={provider.name} {...clickableProps}>
-			<TableCell className="min-w-0">
+			<TableCell className="min-w-0 px-4 py-3">
 				<AvatarData
 					title={displayName}
 					avatar={

site/src/pages/AISettingsPage/TemplatesPage/TemplatesPageView.tsx

@@ -156,7 +156,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 	const label = template.display_name || template.name;
 
 	return (
-		<TableRow className="h-[72px]">
+		<TableRow>
 			<TableCell className="w-full max-w-0 px-4 py-3">
 				<div className="flex min-w-0 items-center gap-4">
 					<Avatar
@@ -249,7 +249,7 @@ const TemplatesTable: FC<TemplatesTableProps> = ({
 					</TableHead>
 				</TableRow>
 			</TableHeader>
-			<TableBody>
+			<TableBody size="lg">
 				{isLoading ? (
 					<TableLoader />
 				) : allowlistedTemplates.length === 0 ? (