From 5ccc15f00d3d6263fd9cbf22ba4c63f76f60fa44 Mon Sep 17 00:00:00 2001
From: Glebson Santos <glebsonsantos@outlook.pt>
Date: Mon, 5 Oct 2026 12:29:44 -0300
Subject: [PATCH 1/4] fix(ui): prevent service header overflow on mobile

---
 .../services/application/[applicationId].tsx              | 8 ++++----
 .../[environmentId]/services/compose/[composeId].tsx      | 8 ++++----
 .../[environmentId]/services/libsql/[libsqlId].tsx        | 8 ++++----
 .../[environmentId]/services/mariadb/[mariadbId].tsx      | 8 ++++----
 .../[environmentId]/services/mongo/[mongoId].tsx          | 8 ++++----
 .../[environmentId]/services/mysql/[mysqlId].tsx          | 8 ++++----
 .../[environmentId]/services/postgres/[postgresId].tsx    | 8 ++++----
 .../[environmentId]/services/redis/[redisId].tsx          | 8 ++++----
 8 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
index cf04a998f..7cdf8e3c9 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
@@ -123,9 +123,9 @@ const Service = (
 			<div className="w-full">
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
 					<div className="rounded-xl bg-background shadow-md ">
-						<CardHeader className="flex flex-row justify-between items-center">
-							<div className="flex flex-col">
-								<CardTitle className="text-xl flex flex-row gap-2 items-center">
+						<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+							<div className="flex min-w-0 flex-1 flex-col">
+								<CardTitle className="text-xl flex min-w-0 flex-row gap-2 items-center">
 									<div className="relative flex flex-row gap-4 items-center">
 										<ShowIconSettings
 											serviceId={applicationId}
@@ -136,7 +136,7 @@ const Service = (
 											<StatusTooltip status={data?.applicationStatus} />
 										</div>
 									</div>
-									{data?.name}
+									<span className="min-w-0 truncate">{data?.name}</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
index 7f4cfc12d..d8d3f1d0d 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
@@ -114,9 +114,9 @@ const Service = (
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
 					<div className="rounded-xl bg-background shadow-md ">
 						<div className="flex flex-col gap-4">
-							<CardHeader className="flex flex-row justify-between items-center">
-								<div className="flex flex-col">
-									<CardTitle className="text-xl flex flex-row gap-2 items-center">
+							<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+								<div className="flex min-w-0 flex-1 flex-col">
+									<CardTitle className="text-xl flex min-w-0 flex-row gap-2 items-center">
 										<div className="relative flex flex-row gap-4 items-center">
 											<ShowIconSettings
 												serviceId={composeId}
@@ -127,7 +127,7 @@ const Service = (
 												<StatusTooltip status={data?.composeStatus} />
 											</div>
 										</div>
-										{data?.name}
+										<span className="min-w-0 truncate">{data?.name}</span>
 									</CardTitle>
 									{data?.description && (
 										<CardDescription>{data?.description}</CardDescription>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
index 362e754a0..09de03746 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
@@ -80,9 +80,9 @@ const Libsql = (
 				</Head>
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl w-full">
 					<div className="rounded-xl bg-background shadow-md ">
-						<CardHeader className="flex flex-row justify-between items-center">
-							<div className="flex flex-col">
-								<CardTitle className="text-xl flex flex-row gap-2">
+						<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+							<div className="flex min-w-0 flex-1 flex-col">
+								<CardTitle className="text-xl flex min-w-0 flex-row gap-2">
 									<div className="relative flex flex-row gap-4">
 										<div className="absolute -right-1  -top-2">
 											<StatusTooltip status={data?.applicationStatus} />
@@ -90,7 +90,7 @@ const Libsql = (
 
 										<LibsqlIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									{data?.name}
+									<span className="min-w-0 truncate">{data?.name}</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
index 5dc531e83..02809f307 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
@@ -92,9 +92,9 @@ const Mariadb = (
 				</Head>
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl w-full">
 					<div className="rounded-xl bg-background shadow-md ">
-						<CardHeader className="flex flex-row justify-between items-center">
-							<div className="flex flex-col">
-								<CardTitle className="text-xl flex flex-row gap-2">
+						<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+							<div className="flex min-w-0 flex-1 flex-col">
+								<CardTitle className="text-xl flex min-w-0 flex-row gap-2">
 									<div className="relative flex flex-row gap-4">
 										<div className="absolute -right-1  -top-2">
 											<StatusTooltip status={data?.applicationStatus} />
@@ -102,7 +102,7 @@ const Mariadb = (
 
 										<MariadbIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									{data?.name}
+									<span className="min-w-0 truncate">{data?.name}</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
index b94984b69..3e5a1875e 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
@@ -91,9 +91,9 @@ const Mongo = (
 			<div className="w-full">
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl w-full">
 					<div className="rounded-xl bg-background shadow-md ">
-						<CardHeader className="flex flex-row justify-between items-center">
-							<div className="flex flex-col">
-								<CardTitle className="text-xl flex flex-row gap-2">
+						<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+							<div className="flex min-w-0 flex-1 flex-col">
+								<CardTitle className="text-xl flex min-w-0 flex-row gap-2">
 									<div className="relative flex flex-row gap-4">
 										<div className="absolute -right-1  -top-2">
 											<StatusTooltip status={data?.applicationStatus} />
@@ -101,7 +101,7 @@ const Mongo = (
 
 										<MongodbIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									{data?.name}
+									<span className="min-w-0 truncate">{data?.name}</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
index 840062c71..6e901b99f 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
@@ -91,9 +91,9 @@ const MySql = (
 				<div className="w-full">
 					<Card className="h-full bg-sidebar  p-2.5 rounded-xl w-full">
 						<div className="rounded-xl bg-background shadow-md ">
-							<CardHeader className="flex flex-row justify-between items-center">
-								<div className="flex flex-col">
-									<CardTitle className="text-xl flex flex-row gap-2">
+							<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+								<div className="flex min-w-0 flex-1 flex-col">
+									<CardTitle className="text-xl flex min-w-0 flex-row gap-2">
 										<div className="relative flex flex-row gap-4">
 											<div className="absolute -right-1  -top-2">
 												<StatusTooltip status={data?.applicationStatus} />
@@ -101,7 +101,7 @@ const MySql = (
 
 											<MysqlIcon className="h-6 w-6 text-muted-foreground" />
 										</div>
-										{data?.name}
+										<span className="min-w-0 truncate">{data?.name}</span>
 									</CardTitle>
 									{data?.description && (
 										<CardDescription>{data?.description}</CardDescription>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
index 9cd1a9538..ce6d21013 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
@@ -90,9 +90,9 @@ const Postgresql = (
 			<div className="w-full">
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl w-full">
 					<div className="rounded-xl bg-background shadow-md ">
-						<CardHeader className="flex flex-row justify-between items-center">
-							<div className="flex flex-col">
-								<CardTitle className="text-xl flex flex-row gap-2">
+						<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+							<div className="flex min-w-0 flex-1 flex-col">
+								<CardTitle className="text-xl flex min-w-0 flex-row gap-2">
 									<div className="relative flex flex-row gap-4">
 										<div className="absolute -right-1  -top-2">
 											<StatusTooltip status={data?.applicationStatus} />
@@ -100,7 +100,7 @@ const Postgresql = (
 
 										<PostgresqlIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									{data?.name}
+									<span className="min-w-0 truncate">{data?.name}</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
index fed0b5dc8..efe711e1e 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
@@ -90,9 +90,9 @@ const Redis = (
 			<div className="w-full">
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl w-full">
 					<div className="rounded-xl bg-background shadow-md ">
-						<CardHeader className="flex flex-row justify-between items-center">
-							<div className="flex flex-col">
-								<CardTitle className="text-xl flex flex-row gap-2">
+						<CardHeader className="flex w-full min-w-0 flex-row justify-between items-center">
+							<div className="flex min-w-0 flex-1 flex-col">
+								<CardTitle className="text-xl flex min-w-0 flex-row gap-2">
 									<div className="relative flex flex-row gap-4">
 										<div className="absolute -right-1  -top-2">
 											<StatusTooltip status={data?.applicationStatus} />
@@ -100,7 +100,7 @@ const Redis = (
 
 										<RedisIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									{data?.name}
+									<span className="min-w-0 truncate">{data?.name}</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>

From 949ac8e0a226301416da846462e3f9c9706ff63b Mon Sep 17 00:00:00 2001
From: Glebson Santos <glebsonsantos@outlook.pt>
Date: Mon, 5 Oct 2026 14:54:30 -0300
Subject: [PATCH 2/4] fix(ui): prevent mobile service header overflow

---
 apps/dokploy/components/shared/advance-breadcrumb.tsx  |  5 ++++-
 .../services/application/[applicationId].tsx           |  8 +++++---
 .../[environmentId]/services/compose/[composeId].tsx   |  8 +++++---
 .../[environmentId]/services/libsql/[libsqlId].tsx     | 10 ++++++----
 .../[environmentId]/services/mariadb/[mariadbId].tsx   | 10 ++++++----
 .../[environmentId]/services/mongo/[mongoId].tsx       | 10 ++++++----
 .../[environmentId]/services/mysql/[mysqlId].tsx       | 10 ++++++----
 .../[environmentId]/services/postgres/[postgresId].tsx | 10 ++++++----
 .../[environmentId]/services/redis/[redisId].tsx       | 10 ++++++----
 9 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/apps/dokploy/components/shared/advance-breadcrumb.tsx b/apps/dokploy/components/shared/advance-breadcrumb.tsx
index 06e4e618c..97781ba72 100644
--- a/apps/dokploy/components/shared/advance-breadcrumb.tsx
+++ b/apps/dokploy/components/shared/advance-breadcrumb.tsx
@@ -357,7 +357,10 @@ export const AdvanceBreadcrumb = () => {
 								className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
 							>
 								<FolderInput className="size-4 text-muted-foreground" />
-								<span className="font-medium max-w-[50px] md:max-w-[150px] truncate">
+								<span
+									className="font-medium max-w-[50px] md:max-w-[150px] truncate"
+									title={currentService?.name}
+								>
 									{currentProject?.name || "Select Project"}
 								</span>
 								<ChevronDown className="size-4 text-muted-foreground" />
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
index 7cdf8e3c9..f1ba041e1 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
@@ -136,7 +136,9 @@ const Service = (
 											<StatusTooltip status={data?.applicationStatus} />
 										</div>
 									</div>
-									<span className="min-w-0 truncate">{data?.name}</span>
+									<span className="min-w-0 truncate" title={data?.name}>
+										{data?.name}
+									</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
@@ -146,10 +148,10 @@ const Service = (
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex flex-col h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
 								<div className="flex flex-row h-fit w-fit gap-2">
 									<Badge
-										className="cursor-pointer"
+										className="max-w-full cursor-pointer truncate"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
index d8d3f1d0d..0f0cbcec7 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
@@ -127,7 +127,9 @@ const Service = (
 												<StatusTooltip status={data?.composeStatus} />
 											</div>
 										</div>
-										<span className="min-w-0 truncate">{data?.name}</span>
+										<span className="min-w-0 truncate" title={data?.name}>
+											{data?.name}
+										</span>
 									</CardTitle>
 									{data?.description && (
 										<CardDescription>{data?.description}</CardDescription>
@@ -137,10 +139,10 @@ const Service = (
 										{data?.appName}
 									</span>
 								</div>
-								<div className="flex flex-col h-fit w-fit gap-2">
+								<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
 									<div className="flex flex-row h-fit w-fit gap-2">
 										<Badge
-											className="cursor-pointer"
+											className="max-w-full cursor-pointer truncate"
 											onClick={() => {
 												const ip = data?.server?.ipAddress || serverIp;
 												if (ip) {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
index 09de03746..43ef933b7 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
@@ -90,7 +90,9 @@ const Libsql = (
 
 										<LibsqlIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									<span className="min-w-0 truncate">{data?.name}</span>
+									<span className="min-w-0 truncate" title={data?.name}>
+										{data?.name}
+									</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
@@ -100,10 +102,10 @@ const Libsql = (
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex flex-col h-fit w-fit gap-2">
-								<div className="flex flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
+								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
 									<Badge
-										className="cursor-pointer"
+										className="max-w-full cursor-pointer truncate"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
index 02809f307..8dd61a9cc 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
@@ -102,7 +102,9 @@ const Mariadb = (
 
 										<MariadbIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									<span className="min-w-0 truncate">{data?.name}</span>
+									<span className="min-w-0 truncate" title={data?.name}>
+										{data?.name}
+									</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
@@ -112,10 +114,10 @@ const Mariadb = (
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex flex-col h-fit w-fit gap-2">
-								<div className="flex flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
+								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
 									<Badge
-										className="cursor-pointer"
+										className="max-w-full cursor-pointer truncate"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
index 3e5a1875e..1f4bcfd63 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
@@ -101,7 +101,9 @@ const Mongo = (
 
 										<MongodbIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									<span className="min-w-0 truncate">{data?.name}</span>
+									<span className="min-w-0 truncate" title={data?.name}>
+										{data?.name}
+									</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
@@ -111,10 +113,10 @@ const Mongo = (
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex flex-col h-fit w-fit gap-2">
-								<div className="flex flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
+								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
 									<Badge
-										className="cursor-pointer"
+										className="max-w-full cursor-pointer truncate"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
index 6e901b99f..abdcf2d5a 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
@@ -101,7 +101,9 @@ const MySql = (
 
 											<MysqlIcon className="h-6 w-6 text-muted-foreground" />
 										</div>
-										<span className="min-w-0 truncate">{data?.name}</span>
+										<span className="min-w-0 truncate" title={data?.name}>
+											{data?.name}
+										</span>
 									</CardTitle>
 									{data?.description && (
 										<CardDescription>{data?.description}</CardDescription>
@@ -111,10 +113,10 @@ const MySql = (
 										{data?.appName}
 									</span>
 								</div>
-								<div className="flex flex-col h-fit w-fit gap-2">
-									<div className="flex flex-row h-fit w-fit gap-2">
+								<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
+									<div className="flex max-w-full flex-row h-fit w-fit gap-2">
 										<Badge
-											className="cursor-pointer"
+											className="max-w-full cursor-pointer truncate"
 											onClick={() => {
 												const ip = data?.server?.ipAddress || serverIp;
 												if (ip) {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
index ce6d21013..3a7a4f14f 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
@@ -100,7 +100,9 @@ const Postgresql = (
 
 										<PostgresqlIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									<span className="min-w-0 truncate">{data?.name}</span>
+									<span className="min-w-0 truncate" title={data?.name}>
+										{data?.name}
+									</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
@@ -110,10 +112,10 @@ const Postgresql = (
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex flex-col h-fit w-fit gap-2">
-								<div className="flex flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
+								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
 									<Badge
-										className="cursor-pointer"
+										className="max-w-full cursor-pointer truncate"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
index efe711e1e..501cf0d86 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
@@ -100,7 +100,9 @@ const Redis = (
 
 										<RedisIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
-									<span className="min-w-0 truncate">{data?.name}</span>
+									<span className="min-w-0 truncate" title={data?.name}>
+										{data?.name}
+									</span>
 								</CardTitle>
 								{data?.description && (
 									<CardDescription>{data?.description}</CardDescription>
@@ -110,10 +112,10 @@ const Redis = (
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex flex-col h-fit w-fit gap-2">
-								<div className="flex flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
+								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
 									<Badge
-										className="cursor-pointer"
+										className="max-w-full cursor-pointer truncate"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {

From 829f8af63fa34141df5e43db2b0b6a5feb156887 Mon Sep 17 00:00:00 2001
From: Yash Kumar <hello@yash.run>
Date: Fri, 16 Oct 2026 17:09:26 +0530
Subject: [PATCH 3/4] fix(ui): fix server badge and appName overflow on mobile

---
 apps/dokploy/components/shared/advance-breadcrumb.tsx  |  2 +-
 .../services/application/[applicationId].tsx           | 10 +++++-----
 .../[environmentId]/services/compose/[composeId].tsx   | 10 +++++-----
 .../[environmentId]/services/libsql/[libsqlId].tsx     | 10 +++++-----
 .../[environmentId]/services/mariadb/[mariadbId].tsx   | 10 +++++-----
 .../[environmentId]/services/mongo/[mongoId].tsx       | 10 +++++-----
 .../[environmentId]/services/mysql/[mysqlId].tsx       | 10 +++++-----
 .../[environmentId]/services/postgres/[postgresId].tsx | 10 +++++-----
 .../[environmentId]/services/redis/[redisId].tsx       | 10 +++++-----
 9 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/apps/dokploy/components/shared/advance-breadcrumb.tsx b/apps/dokploy/components/shared/advance-breadcrumb.tsx
index 97781ba72..0333c738f 100644
--- a/apps/dokploy/components/shared/advance-breadcrumb.tsx
+++ b/apps/dokploy/components/shared/advance-breadcrumb.tsx
@@ -359,7 +359,7 @@ export const AdvanceBreadcrumb = () => {
 								<FolderInput className="size-4 text-muted-foreground" />
 								<span
 									className="font-medium max-w-[50px] md:max-w-[150px] truncate"
-									title={currentService?.name}
+									title={currentProject?.name}
 								>
 									{currentProject?.name || "Select Project"}
 								</span>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
index f1ba041e1..1a5d29ac5 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
@@ -144,14 +144,14 @@ const Service = (
 									<CardDescription>{data?.description}</CardDescription>
 								)}
 
-								<span className="text-sm text-muted-foreground">
+								<span className="text-sm text-muted-foreground min-w-0 truncate">
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-								<div className="flex flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+								<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 									<Badge
-										className="max-w-full cursor-pointer truncate"
+										className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
@@ -167,7 +167,7 @@ const Service = (
 													: "destructive"
 										}
 									>
-										{data?.server?.name || "Dokploy Server"}
+										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
index 0f0cbcec7..6135e59fe 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
@@ -135,14 +135,14 @@ const Service = (
 										<CardDescription>{data?.description}</CardDescription>
 									)}
 
-									<span className="text-sm text-muted-foreground">
+									<span className="text-sm text-muted-foreground min-w-0 truncate">
 										{data?.appName}
 									</span>
 								</div>
-								<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-									<div className="flex flex-row h-fit w-fit gap-2">
+								<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+									<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 										<Badge
-											className="max-w-full cursor-pointer truncate"
+											className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 											onClick={() => {
 												const ip = data?.server?.ipAddress || serverIp;
 												if (ip) {
@@ -158,7 +158,7 @@ const Service = (
 														: "destructive"
 											}
 										>
-											{data?.server?.name || "Dokploy Server"}
+											<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 										</Badge>
 										{data?.server?.serverStatus === "inactive" && (
 											<TooltipProvider>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
index 43ef933b7..c4a918e0e 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
@@ -98,14 +98,14 @@ const Libsql = (
 									<CardDescription>{data?.description}</CardDescription>
 								)}
 
-								<span className="text-sm text-muted-foreground">
+								<span className="text-sm text-muted-foreground min-w-0 truncate">
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+								<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 									<Badge
-										className="max-w-full cursor-pointer truncate"
+										className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
@@ -121,7 +121,7 @@ const Libsql = (
 													: "destructive"
 										}
 									>
-										{data?.server?.name || "Dokploy Server"}
+										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
index 8dd61a9cc..23d2039df 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
@@ -110,14 +110,14 @@ const Mariadb = (
 									<CardDescription>{data?.description}</CardDescription>
 								)}
 
-								<span className="text-sm text-muted-foreground">
+								<span className="text-sm text-muted-foreground min-w-0 truncate">
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+								<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 									<Badge
-										className="max-w-full cursor-pointer truncate"
+										className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
@@ -133,7 +133,7 @@ const Mariadb = (
 													: "destructive"
 										}
 									>
-										{data?.server?.name || "Dokploy Server"}
+										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
index 1f4bcfd63..115903868 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
@@ -109,14 +109,14 @@ const Mongo = (
 									<CardDescription>{data?.description}</CardDescription>
 								)}
 
-								<span className="text-sm text-muted-foreground">
+								<span className="text-sm text-muted-foreground min-w-0 truncate">
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+								<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 									<Badge
-										className="max-w-full cursor-pointer truncate"
+										className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
@@ -132,7 +132,7 @@ const Mongo = (
 													: "destructive"
 										}
 									>
-										{data?.server?.name || "Dokploy Server"}
+										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
index abdcf2d5a..b44edaf38 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
@@ -109,14 +109,14 @@ const MySql = (
 										<CardDescription>{data?.description}</CardDescription>
 									)}
 
-									<span className="text-sm text-muted-foreground">
+									<span className="text-sm text-muted-foreground min-w-0 truncate">
 										{data?.appName}
 									</span>
 								</div>
-								<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-									<div className="flex max-w-full flex-row h-fit w-fit gap-2">
+								<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+									<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 										<Badge
-											className="max-w-full cursor-pointer truncate"
+											className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 											onClick={() => {
 												const ip = data?.server?.ipAddress || serverIp;
 												if (ip) {
@@ -132,7 +132,7 @@ const MySql = (
 														: "destructive"
 											}
 										>
-											{data?.server?.name || "Dokploy Server"}
+											<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 										</Badge>
 										{data?.server?.serverStatus === "inactive" && (
 											<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
index 3a7a4f14f..841412e84 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
@@ -108,14 +108,14 @@ const Postgresql = (
 									<CardDescription>{data?.description}</CardDescription>
 								)}
 
-								<span className="text-sm text-muted-foreground">
+								<span className="text-sm text-muted-foreground min-w-0 truncate">
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+								<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 									<Badge
-										className="max-w-full cursor-pointer truncate"
+										className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
@@ -131,7 +131,7 @@ const Postgresql = (
 													: "destructive"
 										}
 									>
-										{data?.server?.name || "Dokploy Server"}
+										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
index 501cf0d86..ddeb7e4d6 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
@@ -108,14 +108,14 @@ const Redis = (
 									<CardDescription>{data?.description}</CardDescription>
 								)}
 
-								<span className="text-sm text-muted-foreground">
+								<span className="text-sm text-muted-foreground min-w-0 truncate">
 									{data?.appName}
 								</span>
 							</div>
-							<div className="flex max-w-[45%] flex-col h-fit w-fit gap-2 md:max-w-none">
-								<div className="flex max-w-full flex-row h-fit w-fit gap-2">
+							<div className="flex max-w-[45%] min-w-0 flex-col h-fit gap-2 md:max-w-none md:w-fit">
+								<div className="flex max-w-full min-w-0 flex-row h-fit gap-2">
 									<Badge
-										className="max-w-full cursor-pointer truncate"
+										className="min-w-0 max-w-full cursor-pointer overflow-hidden"
 										onClick={() => {
 											const ip = data?.server?.ipAddress || serverIp;
 											if (ip) {
@@ -131,7 +131,7 @@ const Redis = (
 													: "destructive"
 										}
 									>
-										{data?.server?.name || "Dokploy Server"}
+										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>

From e38a980d9ff145261492407860b168b7c5fa55f2 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 16 Oct 2026 11:42:40 +0000
Subject: [PATCH 4/4] [autofix.ci] apply automated fixes

---
 .../[environmentId]/services/application/[applicationId].tsx  | 4 +++-
 .../[environmentId]/services/compose/[composeId].tsx          | 4 +++-
 .../[environmentId]/services/libsql/[libsqlId].tsx            | 4 +++-
 .../[environmentId]/services/mariadb/[mariadbId].tsx          | 4 +++-
 .../environment/[environmentId]/services/mongo/[mongoId].tsx  | 4 +++-
 .../environment/[environmentId]/services/mysql/[mysqlId].tsx  | 4 +++-
 .../[environmentId]/services/postgres/[postgresId].tsx        | 4 +++-
 .../environment/[environmentId]/services/redis/[redisId].tsx  | 4 +++-
 8 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
index 1a5d29ac5..27c9099c8 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
@@ -167,7 +167,9 @@ const Service = (
 													: "destructive"
 										}
 									>
-										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+										<span className="truncate">
+											{data?.server?.name || "Dokploy Server"}
+										</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
index 6135e59fe..9184515d2 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
@@ -158,7 +158,9 @@ const Service = (
 														: "destructive"
 											}
 										>
-											<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+											<span className="truncate">
+												{data?.server?.name || "Dokploy Server"}
+											</span>
 										</Badge>
 										{data?.server?.serverStatus === "inactive" && (
 											<TooltipProvider>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
index c4a918e0e..b31adfe0b 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
@@ -121,7 +121,9 @@ const Libsql = (
 													: "destructive"
 										}
 									>
-										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+										<span className="truncate">
+											{data?.server?.name || "Dokploy Server"}
+										</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
index 23d2039df..ee5ac55b5 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
@@ -133,7 +133,9 @@ const Mariadb = (
 													: "destructive"
 										}
 									>
-										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+										<span className="truncate">
+											{data?.server?.name || "Dokploy Server"}
+										</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
index 115903868..7e922863f 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
@@ -132,7 +132,9 @@ const Mongo = (
 													: "destructive"
 										}
 									>
-										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+										<span className="truncate">
+											{data?.server?.name || "Dokploy Server"}
+										</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
index b44edaf38..fa44c4e07 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
@@ -132,7 +132,9 @@ const MySql = (
 														: "destructive"
 											}
 										>
-											<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+											<span className="truncate">
+												{data?.server?.name || "Dokploy Server"}
+											</span>
 										</Badge>
 										{data?.server?.serverStatus === "inactive" && (
 											<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
index 841412e84..d734f2c59 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
@@ -131,7 +131,9 @@ const Postgresql = (
 													: "destructive"
 										}
 									>
-										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+										<span className="truncate">
+											{data?.server?.name || "Dokploy Server"}
+										</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
index ddeb7e4d6..c3723a99a 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
@@ -131,7 +131,9 @@ const Redis = (
 													: "destructive"
 										}
 									>
-										<span className="truncate">{data?.server?.name || "Dokploy Server"}</span>
+										<span className="truncate">
+											{data?.server?.name || "Dokploy Server"}
+										</span>
 									</Badge>
 									{data?.server?.serverStatus === "inactive" && (
 										<TooltipProvider delayDuration={0}>