diff --git a/src/app/components/columns.tsx b/src/app/components/columns.tsx
index fdc9eb765..d153fad2d 100644
--- a/src/app/components/columns.tsx
+++ b/src/app/components/columns.tsx
@@ -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} />
diff --git a/src/app/pipelines/[pipelineId]/runs/columns.tsx b/src/app/pipelines/[pipelineId]/runs/columns.tsx
index b1ed4671a..8a1f74bcd 100644
--- a/src/app/pipelines/[pipelineId]/runs/columns.tsx
+++ b/src/app/pipelines/[pipelineId]/runs/columns.tsx
@@ -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>
diff --git a/src/app/pipelines/_components/columns.tsx b/src/app/pipelines/_components/columns.tsx
index 5d1b563ef..1aaa9adb4 100644
--- a/src/app/pipelines/_components/columns.tsx
+++ b/src/app/pipelines/_components/columns.tsx
@@ -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>
diff --git a/src/app/runs/columns.tsx b/src/app/runs/columns.tsx
index 33127f794..20738e24e 100644
--- a/src/app/runs/columns.tsx
+++ b/src/app/runs/columns.tsx
@@ -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>
diff --git a/src/app/settings/connectors/columns.tsx b/src/app/settings/connectors/columns.tsx
index 3a424ecb2..488a7cb60 100644
--- a/src/app/settings/connectors/columns.tsx
+++ b/src/app/settings/connectors/columns.tsx
@@ -52,7 +52,7 @@ 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} />
 							)}
@@ -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>
diff --git a/src/app/settings/secrets/[id]/columns.tsx b/src/app/settings/secrets/[id]/columns.tsx
index f0020b229..2d2ff21a3 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>
@@ -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>
diff --git a/src/app/settings/secrets/columns.tsx b/src/app/settings/secrets/columns.tsx
index 09192ecff..c510af18d 100644
--- a/src/app/settings/secrets/columns.tsx
+++ b/src/app/settings/secrets/columns.tsx
@@ -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>
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 0a9eb4787..dc179bf80 100644
--- a/src/app/settings/service-accounts/[service-account-id]/columns.tsx
+++ b/src/app/settings/service-accounts/[service-account-id]/columns.tsx
@@ -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>
diff --git a/src/app/settings/service-accounts/columns.tsx b/src/app/settings/service-accounts/columns.tsx
index 84f6bea89..6289cde96 100644
--- a/src/app/settings/service-accounts/columns.tsx
+++ b/src/app/settings/service-accounts/columns.tsx
@@ -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}
diff --git a/src/app/stacks/columns.tsx b/src/app/stacks/columns.tsx
index db2d0dd28..e2ba0c72d 100644
--- a/src/app/stacks/columns.tsx
+++ b/src/app/stacks/columns.tsx
@@ -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>
diff --git a/src/components/deployments/list/column-definitions.tsx b/src/components/deployments/list/column-definitions.tsx
index ebeb34a0a..9973aa951 100644
--- a/src/components/deployments/list/column-definitions.tsx
+++ b/src/components/deployments/list/column-definitions.tsx
@@ -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>
diff --git a/src/components/pipeline-snapshots/list/column-definitions.tsx b/src/components/pipeline-snapshots/list/column-definitions.tsx
index b24e931dd..9439b893f 100644
--- a/src/components/pipeline-snapshots/list/column-definitions.tsx
+++ b/src/components/pipeline-snapshots/list/column-definitions.tsx
@@ -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"}
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..9c1ea4900 100644
--- a/src/components/stack-components/component-sheet/runs-tab/columns.tsx
+++ b/src/components/stack-components/component-sheet/runs-tab/columns.tsx
@@ -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>
diff --git a/src/components/stack-components/component-sheet/stacks-tab/columns.tsx b/src/components/stack-components/component-sheet/stacks-tab/columns.tsx
index 0eb4fd73d..f7fec74d0 100644
--- a/src/components/stack-components/component-sheet/stacks-tab/columns.tsx
+++ b/src/components/stack-components/component-sheet/stacks-tab/columns.tsx
@@ -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>
diff --git a/src/components/stacks/Sheet/index.tsx b/src/components/stacks/Sheet/index.tsx
index d682b8e34..6e25982b9 100644
--- a/src/components/stacks/Sheet/index.tsx
+++ b/src/components/stacks/Sheet/index.tsx
@@ -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>