gsadmin/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-10-19 23:21:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): prevent mobile service header overflow

Browse Source
This commit is contained in:
Glebson Santos
2026-10-05 14:54:30 -03:00
parent 5ccc15f00d
commit 949ac8e0a2
9 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dokploy/components/shared/advance-breadcrumb.tsx
+4 -1
View File
@@ -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" />
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+5 -3
View File
@@ -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) {
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+5 -3
View File
@@ -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) {
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+6 -4
View File
@@ -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) {
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+6 -4
View File
@@ -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) {
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+6 -4
View File
@@ -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) {
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+6 -4
View File
@@ -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) {
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+6 -4
View File
@@ -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) {
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+6 -4
View File
@@ -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) {