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] 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}>