Skip to content

Commit 3976eb2

Browse files
tzadortzador
committed
grid truncation
1 parent 0118e2f commit 3976eb2

File tree

16 files changed

+65
-43
lines changed

16 files changed

+65
-43
lines changed

‎src/app/components/columns.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,13 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
5353
height={32}
5454
src={sanitizeUrl(row.original.body?.logo_url || "")}
5555
alt="Flavor Icon"
56+
className="shrink-0"
5657
/>
5758
<div>
5859
<div className="flex items-center gap-1">
5960
<ComponentSheet componentId={id}>
60-
<button>
61-
<h2 className="text-text-md font-semibold">{name}</h2>
61+
<button className="grid grid-cols-1 items-center">
62+
<h2 className="truncate text-text-md font-semibold">{name}</h2>
6263
</button>
6364
</ComponentSheet>
6465
<CopyButton copyText={name} />

‎src/app/pipelines/[pipelineId]/runs/columns.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,11 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
6969
<RunIcon className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(status)}`} />
7070
<div>
7171
<div className="flex items-center gap-1">
72-
<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">
73-
<h2 className="text-text-md font-semibold">{name}</h2>
72+
<Link
73+
to={routes.projects.runs.detail(id)}
74+
className="grid grid-cols-1 items-center gap-1"
75+
>
76+
<h2 className="truncate text-text-md font-semibold">{name}</h2>
7477
</Link>
7578
<TooltipProvider>
7679
<Tooltip>

‎src/app/pipelines/_components/columns.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@ export function getPipelineColumns(): ColumnDef<Pipeline>[] {
5656
return (
5757
<div className="group/copybutton flex items-center gap-2">
5858
<PipelineIcon
59-
className={`h-5 w-5 ${getExecutionStatusColor(row.original.resources?.latest_run_status)}`}
59+
className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(row.original.resources?.latest_run_status)}`}
6060
/>
6161
<div>
6262
<div className="flex items-center gap-1">
6363
<Link
6464
to={routes.projects.pipelines.detail.runs(row.original.id)}
65-
className="flex items-center gap-1"
65+
className="grid grid-cols-1 items-center gap-1"
6666
>
67-
<span className="text-text-md font-semibold text-theme-text-primary">
67+
<span className="truncate text-text-md font-semibold text-theme-text-primary">
6868
{row.original.name}
6969
</span>
7070
</Link>

‎src/app/runs/columns.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,13 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
6666
<RunIcon className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(status)}`} />
6767
<div>
6868
<div className="flex items-center gap-1">
69-
<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">
70-
<span className="text-text-md font-semibold text-theme-text-primary">{name}</span>
69+
<Link
70+
to={routes.projects.runs.detail(id)}
71+
className="grid grid-cols-1 items-center gap-1"
72+
>
73+
<span className="truncate text-text-md font-semibold text-theme-text-primary">
74+
{name}
75+
</span>
7176
</Link>
7277
<TooltipProvider>
7378
<Tooltip>

‎src/app/settings/connectors/columns.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ export function useServiceConnectorListColumns(): ColumnDef<ServiceConnector>[]
6060
<div className="flex items-center gap-1">
6161
<Link
6262
to={routes.settings.connectors.detail.configuration(id)}
63-
className="block max-w-[200px] truncate text-text-md font-semibold"
63+
className="block grid max-w-[200px] grid-cols-1 text-text-md font-semibold"
6464
>
65-
{name}
65+
<span className="truncate">{name}</span>
6666
</Link>
6767
<CopyButton copyText={name} />
6868
</div>

‎src/app/settings/secrets/[id]/columns.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const ValueCell: React.FC<{ value: unknown }> = ({ value }) => {
1111
const dots = "•".repeat(valueStr.length);
1212

1313
return (
14-
<div className="flex items-center gap-2 space-x-2">
14+
<div className="flex items-center gap-2 space-x-2">
1515
<EyeIcon onClick={() => setIsVisible(!isVisible)} className="h-4 w-4 flex-shrink-0" />
1616
<span>{isVisible ? valueStr : dots}</span>
1717
</div>
@@ -30,19 +30,21 @@ export function getSecretDetailColumn(
3030
cell: ({ row }) => {
3131
const code = `from zenml.client import Client
3232
secret = Client().get_secret("${name}")
33-
33+
3434
# 'secret.secret_values' will contain a dictionary with all key-value pairs within your secret.
3535
secret.secret_values["${row.original.key}"]
3636
`;
3737
return (
3838
<div className="flex items-center space-x-2">
39-
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
39+
<KeyIcon className="h-5 w-5 shrink-0 fill-primary-400" />
4040
<div className="flex flex-col">
4141
<div className="flex items-center space-x-1">
4242
<div className="flex items-center space-x-1">
43-
<span className="text-text-md font-semibold text-theme-text-primary">
44-
{row.original.key}
45-
</span>
43+
<div className="grid grid-cols-1">
44+
<span className="truncate text-text-md font-semibold text-theme-text-primary">
45+
{row.original.key}
46+
</span>
47+
</div>
4648
<SecretTooltip code={code} />
4749
</div>
4850
</div>

‎src/app/settings/secrets/columns.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
2020

2121
return (
2222
<div className="flex items-center space-x-2">
23-
<LockIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
23+
<LockIcon className="h-5 w-5 shrink-0 fill-primary-400" />
2424
<div className="group/copybutton flex flex-col">
2525
<div className="flex flex-row items-center space-x-1">
2626
<div className="flex items-center space-x-1">
2727
<Link
28-
className="text-text-md font-semibold text-theme-text-primary"
28+
className="grid grid-cols-1 text-text-md font-semibold text-theme-text-primary"
2929
to={routes.settings.secrets.detail(row.original.id)}
3030
>
31-
{row.original.name}
31+
<span className="truncate">{row.original.name}</span>
3232
</Link>
3333
<SecretTooltip code={code} />
3434
</div>

‎src/app/settings/service-accounts/[service-account-id]/columns.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,10 @@ export function getServiceAccountDetailColumn(): ColumnDef<ApiKey>[] {
4444
cell: ({ row }) => {
4545
return (
4646
<div className="flex items-center space-x-2">
47-
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
47+
<KeyIcon className="h-5 w-5 shrink-0 fill-primary-400" />
4848
<div className="group/copybutton flex flex-col">
49-
<div className="flex flex-row items-center space-x-1">
50-
<div className="flex items-center space-x-1 text-text-md font-semibold text-theme-text-primary">
49+
<div className="grid grid-cols-1 items-center space-x-1">
50+
<div className="truncate text-text-md font-semibold text-theme-text-primary">
5151
{row.original.name}
5252
</div>
5353
</div>

‎src/app/settings/service-accounts/columns.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,16 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
4343
return (
4444
<div className="flex items-center space-x-2">
4545
<ServiceAccountAvatar
46-
className="rounded-sm"
46+
className="shrink-0 rounded-sm"
4747
size="sm"
4848
serviceAccountName={row.original.name}
4949
serviceAccountAvatar={row.original.body?.avatar_url ?? undefined}
5050
/>
5151
<div className="group/copybutton flex flex-col">
5252
<div className="flex flex-row items-center space-x-1">
53-
<div className="flex items-center space-x-1">
53+
<div className="grid grid-cols-1 items-center space-x-1">
5454
<Link
55-
className="text-text-md font-semibold text-theme-text-primary"
55+
className="truncate text-text-md font-semibold text-theme-text-primary"
5656
to={routes.settings.service_accounts.detail(row.original.id)}
5757
>
5858
{row.original.name}

‎src/app/stacks/columns.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,17 @@ export function useStackColumns(): ColumnDef<Stack>[] {
1818
const { name, id } = getValue<{ name: string; id: string }>();
1919
return (
2020
<div className="group/copybutton flex items-center gap-2">
21-
<Avatar type="square" size="md">
21+
<Avatar type="square" size="md" className="shrink-0">
2222
<AvatarFallback size="md">{name[0]}</AvatarFallback>
2323
</Avatar>
2424
<div>
2525
<div className="flex items-center gap-1">
2626
<StackSheet stackName={name} stackId={id}>
27-
<h2 className="text-text-md font-semibold">{name}</h2>
27+
<h2 className="grid grid-cols-1 text-text-md font-semibold">
28+
<span className="truncate">{name}</span>
29+
</h2>
2830
</StackSheet>
29-
<CopyButton copyText={name}></CopyButton>
31+
<CopyButton copyText={name} />
3032
</div>
3133
<div className="flex items-center gap-1">
3234
<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>

0 commit comments

Comments
 (0)