diff --git a/src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx b/src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx
index 50717e9e4..3cd56aa09 100644
--- a/src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx
+++ b/src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx
@@ -18,20 +18,22 @@ export function useDeploymentColumns(): ColumnDef<Deployment>[] {
 				id: "name",
 				header: "Deployment",
 				accessorFn: (row) => row.name,
-
+				meta: {
+					className: "max-w-[30ch]"
+				},
 				cell: ({ row }) => {
 					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>
-								<div className="flex items-center gap-1">
+							<div className="flex w-full flex-col">
+								<div className="flex flex-1 items-center gap-1">
 									<Link
 										to={routes.projects.deployments.detail.overview(id)}
-										className="flex items-center gap-1"
+										className="flex min-w-0 flex-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>
diff --git a/src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx b/src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx
index 6021e15d6..a8af1a255 100644
--- a/src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx
+++ b/src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx
@@ -52,19 +52,22 @@ export function useSnapshotColumns(): ColumnDef<PipelineSnapshot>[] {
 				id: "name",
 				header: "Snapshot",
 				accessorFn: (row) => row.name,
+				meta: {
+					className: "max-w-[30ch]"
+				},
 				cell: ({ row }) => {
 					const name = row.original.name;
 					const id = row.original.id;
 					return (
 						<div className="group/copybutton flex items-center gap-2">
 							<SnapshotIcon className={`h-5 w-5 fill-primary-400`} />
-							<div>
-								<div className="flex items-center gap-1">
+							<div className="flex w-full flex-col">
+								<div className="flex flex-1 items-center gap-1">
 									<Link
 										to={routes.projects.snapshots.detail.overview(id)}
-										className="flex items-center gap-1"
+										className="flex min-w-0 flex-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>
diff --git a/src/app/pipelines/_components/columns.tsx b/src/app/pipelines/_components/columns.tsx
index 5d1b563ef..65c143cb4 100644
--- a/src/app/pipelines/_components/columns.tsx
+++ b/src/app/pipelines/_components/columns.tsx
@@ -52,19 +52,22 @@ export function getPipelineColumns(): ColumnDef<Pipeline>[] {
 		{
 			id: "name",
 			header: "Pipeline",
+			meta: {
+				className: "max-w-[30ch]"
+			},
 			cell: ({ row }) => {
 				return (
 					<div className="group/copybutton flex items-center gap-2">
 						<PipelineIcon
 							className={`h-5 w-5 ${getExecutionStatusColor(row.original.resources?.latest_run_status)}`}
 						/>
-						<div>
-							<div className="flex items-center gap-1">
+						<div className="flex w-full flex-col">
+							<div className="flex flex-1 items-center gap-1">
 								<Link
 									to={routes.projects.pipelines.detail.runs(row.original.id)}
-									className="flex items-center gap-1"
+									className="flex min-w-0 flex-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>
diff --git a/src/app/runs/columns.tsx b/src/app/runs/columns.tsx
index 2138326c1..b3e2bc426 100644
--- a/src/app/runs/columns.tsx
+++ b/src/app/runs/columns.tsx
@@ -54,6 +54,9 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 			name: row.name,
 			status: row.body?.status
 		}),
+		meta: {
+			className: "max-w-[30ch]"
+		},
 		cell: ({ getValue }) => {
 			const { name, status, id } = getValue<{
 				id: string;
@@ -63,10 +66,15 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 			return (
 				<div className="group/copybutton flex items-center gap-2">
 					<RunIcon className={`h-5 w-5 ${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>
+					<div className="flex w-full flex-col">
+						<div className="flex flex-1 items-center gap-1">
+							<Link
+								to={routes.projects.runs.detail(id)}
+								className="flex min-w-0 flex-1 items-center gap-1"
+							>
+								<span className="truncate text-text-md font-semibold text-theme-text-primary">
+									{name}
+								</span>
 							</Link>
 							<TooltipProvider>
 								<Tooltip>
diff --git a/src/app/settings/secrets/[id]/columns.tsx b/src/app/settings/secrets/[id]/columns.tsx
index f0020b229..deb2710d2 100644
--- a/src/app/settings/secrets/[id]/columns.tsx
+++ b/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>
@@ -27,6 +27,9 @@ export function getSecretDetailColumn(
 			id: "key",
 			header: "Key",
 			accessorKey: "key",
+			meta: {
+				className: "max-w-[30ch]"
+			},
 			cell: ({ row }) => {
 				const code = `from zenml.client import Client
 secret = Client().get_secret("${name}")
@@ -37,10 +40,10 @@ 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 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">
+						<div className="flex w-full flex-col">
+							<div className="flex flex-1 items-center space-x-1">
+								<div className="flex min-w-0 flex-1 items-center space-x-1">
+									<span className="truncate text-text-md font-semibold text-theme-text-primary">
 										{row.original.key}
 									</span>
 									<SecretTooltip code={code} />
diff --git a/src/app/settings/secrets/columns.tsx b/src/app/settings/secrets/columns.tsx
index 09192ecff..6112eb56c 100644
--- a/src/app/settings/secrets/columns.tsx
+++ b/src/app/settings/secrets/columns.tsx
@@ -15,17 +15,20 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
 		id: "secret",
 		header: "Secret",
 		accessorFn: (row) => row.name,
+		meta: {
+			className: "max-w-[30ch]"
+		},
 		cell: ({ getValue, row }) => {
 			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="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="group/copybutton flex w-full flex-col">
+						<div className="flex flex-1 flex-row items-center space-x-1">
+							<div className="flex min-w-0 flex-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.secrets.detail(row.original.id)}
 								>
 									{row.original.name}
diff --git a/src/app/settings/service-accounts/[service-account-id]/columns.tsx b/src/app/settings/service-accounts/[service-account-id]/columns.tsx
index 275a0a16d..fd37beaf6 100644
--- a/src/app/settings/service-accounts/[service-account-id]/columns.tsx
+++ b/src/app/settings/service-accounts/[service-account-id]/columns.tsx
@@ -41,13 +41,16 @@ export function getServiceAccountDetailColumn(): ColumnDef<ApiKey>[] {
 			accessorFn: (row) => ({
 				name: row.name
 			}),
+			meta: {
+				className: "max-w-[30ch]"
+			},
 			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="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="group/copybutton flex w-full flex-col">
+							<div className="flex min-w-0 flex-1 flex-row items-center space-x-1">
+								<div className="flex items-center space-x-1 truncate text-text-md font-semibold text-theme-text-primary">
 									{row.original.name}
 								</div>
 							</div>
diff --git a/src/app/settings/service-accounts/columns.tsx b/src/app/settings/service-accounts/columns.tsx
index 84f6bea89..c95144a4a 100644
--- a/src/app/settings/service-accounts/columns.tsx
+++ b/src/app/settings/service-accounts/columns.tsx
@@ -39,6 +39,9 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
 			id: "service-account",
 			header: "Service Account",
 			accessorFn: (row) => row.name,
+			meta: {
+				className: "max-w-[30ch]"
+			},
 			cell: ({ row }) => {
 				return (
 					<div className="flex items-center space-x-2">
@@ -48,11 +51,11 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
 							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="group/copybutton flex w-full flex-col">
+							<div className="flex flex-1 flex-row items-center space-x-1">
+								<div className="flex min-w-0 flex-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}
diff --git a/src/components/stack-components/component-sheet/runs-tab/columns.tsx b/src/components/stack-components/component-sheet/runs-tab/columns.tsx
index 09ee3339f..84699168f 100644
--- a/src/components/stack-components/component-sheet/runs-tab/columns.tsx
+++ b/src/components/stack-components/component-sheet/runs-tab/columns.tsx
@@ -22,6 +22,9 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 			name: row.name,
 			status: row.body?.status
 		}),
+		meta: {
+			className: "max-w-[30ch]"
+		},
 		cell: ({ getValue }) => {
 			const { name, status, id } = getValue<{
 				id: string;
@@ -31,10 +34,15 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 			return (
 				<div className="group/copybutton flex items-center gap-2">
 					<RunIcon className={`h-5 w-5 ${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>
+					<div className="flex w-full flex-col">
+						<div className="flex flex-1 items-center gap-1">
+							<Link
+								to={routes.projects.runs.detail(id)}
+								className="flex min-w-0 flex-1 items-center gap-1"
+							>
+								<span className="truncate text-text-md font-semibold text-theme-text-primary">
+									{name}
+								</span>
 							</Link>
 							<TooltipProvider>
 								<Tooltip>