From 726664ab3c250ce5b9678f729e4a6852182c13fb Mon Sep 17 00:00:00 2001
From: Totopo27 <35828647+Totopo27@users.noreply.github.com>
Date: Mon, 12 Oct 2026 07:30:51 -0600
Subject: [PATCH] fix(ui): wrap and clamp service card description on
 environment page

---
 .../[projectId]/environment/[environmentId].tsx        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
index a75510239..02ad03b0e 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
@@ -1663,19 +1663,19 @@ const EnvironmentPage = (
 
 																	<CardHeader>
 																		<CardTitle className="flex items-center justify-between">
-																			<div className="flex flex-row items-center gap-2 justify-between w-full">
-																				<div className="flex flex-col gap-2">
-																					<span className="text-base flex items-center gap-2 font-medium leading-none flex-wrap">
+																			<div className="flex flex-row items-center gap-2 justify-between w-full min-w-0">
+																				<div className="flex flex-col gap-2 min-w-0 flex-1">
+																					<span className="text-base flex items-center gap-2 font-medium leading-none flex-wrap break-words">
 																						{service.name}
 																					</span>
 																					{service.description && (
-																						<span className="text-sm font-medium text-muted-foreground">
+																						<span className="text-sm font-medium text-muted-foreground wrap-anywhere line-clamp-3">
 																							{service.description}
 																						</span>
 																					)}
 																				</div>
 
-																				<span className="text-sm font-medium text-muted-foreground self-start">
+																				<span className="text-sm font-medium text-muted-foreground self-start shrink-0">
 																					{service.type === "postgres" && (
 																						<PostgresqlIcon className="h-7 w-7" />
 																					)}