Skip to content

Bug/816 long names #870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 5, 2025
Merged

Bug/816 long names #870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3976eb2
grid truncation
tzador Oct 30, 2025
55f138a
apply-min-width
tzador Nov 5, 2025
19784f3
revert: inline avatar
Cahllagerfeld Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/app/components/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,19 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
const id = row.original.id;
const name = row.original.name;
return (
<div className="group/copybutton flex items-center gap-2">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<img
width={32}
height={32}
src={sanitizeUrl(row.original.body?.logo_url || "")}
alt="Flavor Icon"
className="shrink-0"
/>
<div>
<div className="flex items-center gap-1">
<ComponentSheet componentId={id}>
<button>
<h2 className="text-text-md font-semibold">{name}</h2>
<button className="grid grid-cols-1 items-center">
<h2 className="truncate text-text-md font-semibold">{name}</h2>
</button>
</ComponentSheet>
<CopyButton copyText={name} />
Expand Down
9 changes: 6 additions & 3 deletions src/app/pipelines/[pipelineId]/runs/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,15 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
}>();

return (
<div className="group/copybutton flex items-center gap-2">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<RunIcon className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(status)}`} />
<div>
<div className="flex items-center gap-1">
<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">
<h2 className="text-text-md font-semibold">{name}</h2>
<Link
to={routes.projects.runs.detail(id)}
className="grid grid-cols-1 items-center gap-1"
>
<h2 className="truncate text-text-md font-semibold">{name}</h2>
</Link>
<TooltipProvider>
<Tooltip>
Expand Down
8 changes: 4 additions & 4 deletions src/app/pipelines/_components/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,17 +54,17 @@ export function getPipelineColumns(): ColumnDef<Pipeline>[] {
header: "Pipeline",
cell: ({ row }) => {
return (
<div className="group/copybutton flex items-center gap-2">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<PipelineIcon
className={`h-5 w-5 ${getExecutionStatusColor(row.original.resources?.latest_run_status)}`}
className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(row.original.resources?.latest_run_status)}`}
/>
<div>
<div className="flex items-center gap-1">
<Link
to={routes.projects.pipelines.detail.runs(row.original.id)}
className="flex items-center gap-1"
className="grid grid-cols-1 items-center gap-1"
>
<span className="text-text-md font-semibold text-theme-text-primary">
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{row.original.name}
</span>
</Link>
Expand Down
11 changes: 8 additions & 3 deletions src/app/runs/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,17 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
status: ExecutionStatus;
}>();
return (
<div className="group/copybutton flex items-center gap-2">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<RunIcon className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(status)}`} />
<div>
<div className="flex items-center gap-1">
<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">
<span className="text-text-md font-semibold text-theme-text-primary">{name}</span>
<Link
to={routes.projects.runs.detail(id)}
className="grid grid-cols-1 items-center gap-1"
>
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name}
</span>
</Link>
<TooltipProvider>
<Tooltip>
Expand Down
6 changes: 3 additions & 3 deletions src/app/settings/connectors/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,17 @@ export function useServiceConnectorListColumns(): ColumnDef<ServiceConnector>[]
const connectorType = row.original.body?.connector_type;

return (
<div className="group/copybutton flex items-center gap-2">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
{!!connectorType && typeof connectorType !== "string" && (
<ConnectorTypeTooltip connectorType={connectorType} />
)}
<div>
<div className="flex items-center gap-1">
<Link
to={routes.settings.connectors.detail.configuration(id)}
className="block max-w-[200px] truncate text-text-md font-semibold"
className="block grid max-w-[200px] grid-cols-1 text-text-md font-semibold"
>
{name}
<span className="truncate">{name}</span>
</Link>
<CopyButton copyText={name} />
</div>
Expand Down
16 changes: 9 additions & 7 deletions src/app/settings/secrets/[id]/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ValueCell: React.FC<{ value: unknown }> = ({ value }) => {
const dots = "•".repeat(valueStr.length);

return (
<div className="flex items-center gap-2 space-x-2">
<div className="flex items-center gap-2 space-x-2">
<EyeIcon onClick={() => setIsVisible(!isVisible)} className="h-4 w-4 flex-shrink-0" />
<span>{isVisible ? valueStr : dots}</span>
</div>
Expand All @@ -30,19 +30,21 @@ export function getSecretDetailColumn(
cell: ({ row }) => {
const code = `from zenml.client import Client
secret = Client().get_secret("${name}")

# 'secret.secret_values' will contain a dictionary with all key-value pairs within your secret.
secret.secret_values["${row.original.key}"]
`;
return (
<div className="flex items-center space-x-2">
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
<div className="flex min-w-[10rem] items-center space-x-2">
<KeyIcon className="h-5 w-5 shrink-0 fill-primary-400" />
<div className="flex flex-col">
<div className="flex items-center space-x-1">
<div className="flex items-center space-x-1">
<span className="text-text-md font-semibold text-theme-text-primary">
{row.original.key}
</span>
<div className="grid grid-cols-1">
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{row.original.key}
</span>
</div>
<SecretTooltip code={code} />
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/app/settings/secrets/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
const code = getSecretSnippet(row.original.name);

return (
<div className="flex items-center space-x-2">
<LockIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
<div className="flex min-w-[10rem] items-center space-x-2">
<LockIcon className="h-5 w-5 shrink-0 fill-primary-400" />
<div className="group/copybutton flex flex-col">
<div className="flex flex-row items-center space-x-1">
<div className="flex items-center space-x-1">
<Link
className="text-text-md font-semibold text-theme-text-primary"
className="grid grid-cols-1 text-text-md font-semibold text-theme-text-primary"
to={routes.settings.secrets.detail(row.original.id)}
>
{row.original.name}
<span className="truncate">{row.original.name}</span>
</Link>
<SecretTooltip code={code} />
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/app/settings/service-accounts/[service-account-id]/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ export function getServiceAccountDetailColumn(): ColumnDef<ApiKey>[] {
}),
cell: ({ row }) => {
return (
<div className="flex items-center space-x-2">
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
<div className="flex min-w-[10rem] items-center space-x-2">
<KeyIcon className="h-5 w-5 shrink-0 fill-primary-400" />
<div className="group/copybutton flex flex-col">
<div className="flex flex-row items-center space-x-1">
<div className="flex items-center space-x-1 text-text-md font-semibold text-theme-text-primary">
<div className="grid grid-cols-1 items-center space-x-1">
<div className="truncate text-text-md font-semibold text-theme-text-primary">
{row.original.name}
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/app/settings/service-accounts/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,18 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
accessorFn: (row) => row.name,
cell: ({ row }) => {
return (
<div className="flex items-center space-x-2">
<div className="flex min-w-[10rem] items-center space-x-2">
<ServiceAccountAvatar
className="rounded-sm"
className="shrink-0 rounded-sm"
size="sm"
serviceAccountName={row.original.name}
serviceAccountAvatar={row.original.body?.avatar_url ?? undefined}
/>
<div className="group/copybutton flex flex-col">
<div className="flex flex-row items-center space-x-1">
<div className="flex items-center space-x-1">
<div className="grid grid-cols-1 items-center space-x-1">
<Link
className="text-text-md font-semibold text-theme-text-primary"
className="truncate text-text-md font-semibold text-theme-text-primary"
to={routes.settings.service_accounts.detail(row.original.id)}
>
{row.original.name}
Expand Down
10 changes: 6 additions & 4 deletions src/app/stacks/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,18 @@ export function useStackColumns(): ColumnDef<Stack>[] {
cell: ({ getValue }) => {
const { name, id } = getValue<{ name: string; id: string }>();
return (
<div className="group/copybutton flex items-center gap-2">
<Avatar type="square" size="md">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<Avatar type="square" size="md" className="shrink-0">
<AvatarFallback size="md">{name[0]}</AvatarFallback>
</Avatar>
<div>
<div className="flex items-center gap-1">
<StackSheet stackName={name} stackId={id}>
<h2 className="text-text-md font-semibold">{name}</h2>
<h2 className="grid grid-cols-1 text-text-md font-semibold">
<span className="truncate">{name}</span>
</h2>
</StackSheet>
<CopyButton copyText={name}></CopyButton>
<CopyButton copyText={name} />
</div>
<div className="flex items-center gap-1">
<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>
Expand Down
8 changes: 4 additions & 4 deletions src/components/deployments/list/column-definitions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ export function createDeploymentNameColumn(): ColumnDef<Deployment> {
const name = row.original.name;
const id = row.original.id;
return (
<div className="group/copybutton flex items-center gap-2">
<Rocket className={`h-5 w-5 fill-primary-400`} />
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<Rocket className="h-5 w-5 shrink-0 fill-primary-400" />
<div>
<div className="flex items-center gap-1">
<Link
to={routes.projects.deployments.detail.overview(id)}
className="flex items-center gap-1"
className="grid grid-cols-1 items-center gap-1"
>
<span className="text-text-md font-semibold text-theme-text-primary">
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name ?? "Unnamed"}
</span>
</Link>
Expand Down
4 changes: 2 additions & 2 deletions src/components/pipeline-snapshots/list/column-definitions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ export function createSnapshotNameColumn(): ColumnDef<PipelineSnapshot> {
const name = row.original.name;
const id = row.original.id;
return (
<div className="group/copybutton flex items-center gap-2">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<SnapshotIcon className={`h-5 w-5 shrink-0 fill-primary-400`} />
<div>
<div className="flex items-center gap-1">
<Link
to={routes.projects.snapshots.detail.overview(id)}
className="flex items-center gap-1"
className="grid grid-cols-1 items-center gap-1"
>
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name ?? "Unnamed"}
Expand Down
13 changes: 9 additions & 4 deletions src/components/stack-components/component-sheet/runs-tab/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,17 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
status: ExecutionStatus;
}>();
return (
<div className="group/copybutton flex items-center gap-2">
<RunIcon className={`h-5 w-5 ${getExecutionStatusColor(status)}`} />
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<RunIcon className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(status)}`} />
<div>
<div className="flex items-center gap-1">
<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">
<span className="text-text-md font-semibold text-theme-text-primary">{name}</span>
<Link
to={routes.projects.runs.detail(id)}
className="grid grid-cols-1 items-center gap-1"
>
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name}
</span>
</Link>
<TooltipProvider>
<Tooltip>
Expand Down
8 changes: 4 additions & 4 deletions src/components/stack-components/component-sheet/stacks-tab/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ export function getStackColumnsPanel(): ColumnDef<Stack>[] {
cell: ({ row }) => {
const { name, id } = row.original;
return (
<div className="group/copybutton flex items-center gap-2">
<Avatar type="square" size="md">
<div className="group/copybutton flex min-w-[10rem] items-center gap-2">
<Avatar type="square" size="md" className="shrink-0">
<AvatarFallback size="md">{name[0]}</AvatarFallback>
</Avatar>
<div>
<div className="flex items-center gap-1">
<h2 className="text-text-md font-semibold">{name}</h2>
<div className="grid grid-cols-1 items-center gap-1">
<h2 className="truncate text-text-md font-semibold">{name}</h2>
</div>
<div className="flex items-center gap-1">
<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>
Expand Down
10 changes: 6 additions & 4 deletions src/components/stacks/Sheet/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,16 @@ function StackHeadline({ stackId }: Props) {
);

return (
<div className="flex items-center justify-between border-b border-theme-border-moderate bg-theme-surface-primary p-5">
<div className="flex min-w-[10rem] items-center justify-between border-b border-theme-border-moderate bg-theme-surface-primary p-5">
<div className="flex items-center space-x-2">
<Avatar type="square" size="lg">
<Avatar type="square" size="lg" className="shrink-0">
<AvatarFallback size="lg">{stack.data.name[0]}</AvatarFallback>
</Avatar>
<div>
<div className="group/copybutton flex items-center gap-0.5">
<p className="mb-0.5 text-text-sm text-theme-text-secondary">{stack.data.id}</p>
<div className="group/copybutton grid grid-cols-1 items-center gap-0.5">
<p className="mb-0.5 truncate text-text-sm text-theme-text-secondary">
{stack.data.id}
</p>
<CopyButton copyText={stack.data.id} />
</div>

Expand Down