Bug/816 long names

src/app/components/columns.tsx

@@ -53,12 +53,13 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 							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} />

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

@@ -69,8 +69,11 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
 						<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>

src/app/pipelines/_components/columns.tsx

@@ -56,15 +56,15 @@ export function getPipelineColumns(): ColumnDef<Pipeline>[] {
 				return (
 					<div className="group/copybutton flex 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>

src/app/runs/columns.tsx

@@ -66,8 +66,13 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 					<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>

src/app/settings/connectors/columns.tsx

@@ -60,9 +60,9 @@ export function useServiceConnectorListColumns(): ColumnDef<ServiceConnector>[]
 								<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>

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

@@ -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>
@@ -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" />
+						<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>

src/app/settings/secrets/columns.tsx

@@ -20,15 +20,15 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
 
 			return (
 				<div className="flex items-center space-x-2">
-					<LockIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
+					<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>

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

@@ -44,10 +44,10 @@ 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" />
+						<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>

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

@@ -43,16 +43,16 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
 				return (
 					<div className="flex 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}

src/app/stacks/columns.tsx

@@ -18,15 +18,17 @@ export function useStackColumns(): ColumnDef<Stack>[] {
 				const { name, id } = getValue<{ name: string; id: string }>();
 				return (
 					<div className="group/copybutton flex items-center gap-2">
-						<Avatar type="square" size="md">
+						<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>

src/components/InlineAvatar.tsx

@@ -20,7 +20,9 @@ export function InlineAvatar({ username, isServiceAccount, avatarUrl, className,
 				isServiceAccount={isServiceAccount}
 				avatarUrl={avatarUrl}
 			/>
-			<p className="truncate text-text-sm font-semibold text-theme-text-primary">{username}</p>
+			<div className="grid grid-cols-1">
+				<p className="truncate text-text-sm font-semibold text-theme-text-primary">{username}</p>
+			</div>
 			{isServiceAccount && <BotBadge />}
 		</div>
 	);

src/components/deployments/list/column-definitions.tsx

@@ -22,14 +22,14 @@ export function createDeploymentNameColumn(): ColumnDef<Deployment> {
 			const id = row.original.id;
 			return (
 				<div className="group/copybutton flex items-center gap-2">
-					<Rocket className={`h-5 w-5 fill-primary-400`} />
+					<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>

src/components/pipeline-snapshots/list/column-definitions.tsx

@@ -59,7 +59,7 @@ export function createSnapshotNameColumn(): ColumnDef<PipelineSnapshot> {
 						<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"}

src/components/stack-components/component-sheet/runs-tab/columns.tsx

@@ -30,11 +30,16 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 			}>();
 			return (
 				<div className="group/copybutton flex items-center gap-2">
-					<RunIcon className={`h-5 w-5 ${getExecutionStatusColor(status)}`} />
+					<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>

src/components/stack-components/component-sheet/stacks-tab/columns.tsx

@@ -16,12 +16,12 @@ export function getStackColumnsPanel(): ColumnDef<Stack>[] {
 				const { name, id } = row.original;
 				return (
 					<div className="group/copybutton flex items-center gap-2">
-						<Avatar type="square" size="md">
+						<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>

src/components/stacks/Sheet/index.tsx

@@ -64,12 +64,14 @@ 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 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>