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