Skip to content

Commit a8d1652

Browse files
tzadorCahllagerfeld
tzador
and
Cahllagerfeld
authored
fix: truncate long names (#870)
Co-authored-by: Cahllagerfeld <[email protected]>
1 parent b6a4489 commit a8d1652

File tree

15 files changed

+77
-57
lines changed

15 files changed

+77
-57
lines changed

‎src/app/components/columns.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,19 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
4747
const id = row.original.id;
4848
const name = row.original.name;
4949
return (
50-
<div className="group/copybutton flex items-center gap-2">
50+
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
5151
<img
5252
width={32}
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: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,15 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
6565
}>();
6666

6767
return (
68-
<div className="group/copybutton flex items-center gap-2">
68+
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,17 @@ export function getPipelineColumns(): ColumnDef<Pipeline>[] {
5454
header: "Pipeline",
5555
cell: ({ row }) => {
5656
return (
57-
<div className="group/copybutton flex items-center gap-2">
57+
<div className="group/copybutton flex min-w-[10rem] 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: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,17 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
6262
status: ExecutionStatus;
6363
}>();
6464
return (
65-
<div className="group/copybutton flex items-center gap-2">
65+
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,17 @@ export function useServiceConnectorListColumns(): ColumnDef<ServiceConnector>[]
5252
const connectorType = row.original.body?.connector_type;
5353

5454
return (
55-
<div className="group/copybutton flex items-center gap-2">
55+
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
5656
{!!connectorType && typeof connectorType !== "string" && (
5757
<ConnectorTypeTooltip connectorType={connectorType} />
5858
)}
5959
<div>
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: 9 additions & 7 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 (
38-
<div className="flex items-center space-x-2">
39-
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
38+
<div className="flex min-w-[10rem] items-center space-x-2">
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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
1919
const code = getSecretSnippet(row.original.name);
2020

2121
return (
22-
<div className="flex items-center space-x-2">
23-
<LockIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
22+
<div className="flex min-w-[10rem] items-center space-x-2">
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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ export function getServiceAccountDetailColumn(): ColumnDef<ApiKey>[] {
4343
}),
4444
cell: ({ row }) => {
4545
return (
46-
<div className="flex items-center space-x-2">
47-
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
46+
<div className="flex min-w-[10rem] items-center space-x-2">
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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,18 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
4141
accessorFn: (row) => row.name,
4242
cell: ({ row }) => {
4343
return (
44-
<div className="flex items-center space-x-2">
44+
<div className="flex min-w-[10rem] 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: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,18 @@ export function useStackColumns(): ColumnDef<Stack>[] {
1717
cell: ({ getValue }) => {
1818
const { name, id } = getValue<{ name: string; id: string }>();
1919
return (
20-
<div className="group/copybutton flex items-center gap-2">
21-
<Avatar type="square" size="md">
20+
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
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)