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

fix(ui): fix server badge and appName overflow on mobile

Browse Source
This commit is contained in:
Yash Kumar
2026-10-16 17:09:26 +05:30
parent 949ac8e0a2
commit 829f8af63f
9 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dokploy/components/shared/advance-breadcrumb.tsx
+1 -1
View File
@@ -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>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+5 -5
View File
@@ -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}>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+5 -5
View File
@@ -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>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+5 -5
View File
@@ -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}>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+5 -5
View File
@@ -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}>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+5 -5
View File
@@ -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}>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+5 -5
View File
@@ -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}>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+5 -5
View File
@@ -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}>
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+5 -5
View File
@@ -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}>