diff --git a/site/src/components/Table/Table.stories.tsx b/site/src/components/Table/Table.stories.tsx
index 459ad0f115..c1a2c77f8d 100644
--- a/site/src/components/Table/Table.stories.tsx
+++ b/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: (
+ <>
+
+
+ Invoice
+ Status
+ Method
+ Amount
+
+
+
+ {invoices.map((invoice) => (
+
+ {invoice.invoice}
+ {invoice.paymentStatus}
+ {invoice.paymentMethod}
+
+ {invoice.totalAmount}
+
+
+ ))}
+
+ >
+ ),
+ },
+};
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
index 85af9eda5f..1e60e2df84 100644
--- a/site/src/components/Table/Table.tsx
+++ b/site/src/components/Table/Table.tsx
@@ -34,8 +34,20 @@ export const TableHeader: React.FC> = ({
return ;
};
-export const TableBody: React.FC> = ({
+const tableBodyVariants = cva(null, {
+ variants: {
+ size: {
+ lg: "[&>tr>td]:box-border [&>tr>td]:h-[72px]",
+ },
+ },
+});
+
+type TableBodyProps = React.ComponentPropsWithRef<"tbody"> &
+ VariantProps;
+
+export const TableBody: React.FC = ({
className,
+ size,
...props
}) => {
return (
@@ -45,6 +57,7 @@ export const TableBody: React.FC> = ({
"[&>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}
diff --git a/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx b/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx
index e973a1fe86..fbc184c483 100644
--- a/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx
+++ b/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx
@@ -85,7 +85,7 @@ export const GatewayKeysPageView: FC = ({
-
+
{isLoading ? (
) : error ? (
diff --git a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx
index 7bd91a2fe2..f92fb33538 100644
--- a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx
+++ b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx
@@ -67,7 +67,7 @@ const MCPServersPageView: FC = ({
-
+
{isLoading ? (
) : !error && servers.length === 0 ? (
diff --git a/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx b/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx
index e6e266d738..34a7e40e68 100644
--- a/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx
+++ b/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx
@@ -19,7 +19,7 @@ export const MCPServerRow: FC = ({ server, onClick }) => {
return (
-
+
= ({
-
+
{isLoading ? (
) : models.length === 0 ? (
diff --git a/site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx b/site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx
index 73b1f1a6b3..ce3fc9b018 100644
--- a/site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx
+++ b/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 = ({
const displayName = model.display_name || model.model;
return (
-
-
+
+
= ({
Status
-
+
{isLoading || isFetching ? (
) : providers.length === 0 ? (
diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
index bce69fdb3d..68d139b063 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
@@ -24,7 +24,7 @@ export const ProviderRow: React.FC = ({
return (
-
+
= ({
const label = template.display_name || template.name;
return (
-
+
= ({
-
+
{isLoading ? (
) : allowlistedTemplates.length === 0 ? (