From 19b4edee8d3ea9bb9d552f2cc9a8cbeb4b4502de Mon Sep 17 00:00:00 2001
From: Tam Nguyen <tamkhietnguyen1@gmail.com>
Date: Tue, 13 May 2025 15:15:45 +1000
Subject: [PATCH 1/3] refactor: remove redundant class bg-card due to
 bg-transparent set later

---
 .../components/dashboard/application/domains/show-domains.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
index 26df7b696..f4e6857d6 100644
--- a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
@@ -186,7 +186,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 								return (
 									<Card
 										key={item.domainId}
-										className="relative overflow-hidden w-full border bg-card transition-all hover:shadow-md bg-transparent h-fit"
+										className="relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit"
 									>
 										<CardContent className="p-6">
 											<div className="flex flex-col gap-4">

From 7d0075c230f262e87633c105cd83e7e8f5a78b58 Mon Sep 17 00:00:00 2001
From: Tam Nguyen <tamkhietnguyen1@gmail.com>
Date: Tue, 13 May 2025 15:43:52 +1000
Subject: [PATCH 2/3] fix(ui): domain responsiveness with screen width

---
 .../application/domains/show-domains.tsx      | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
index f4e6857d6..06fa57435 100644
--- a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
@@ -191,25 +191,14 @@ export const ShowDomains = ({ id, type }: Props) => {
 										<CardContent className="p-6">
 											<div className="flex flex-col gap-4">
 												{/* Service & Domain Info */}
-												<div className="flex items-start justify-between">
-													<div className="flex flex-col gap-2">
-														{item.serviceName && (
-															<Badge variant="outline" className="w-fit">
-																<Server className="size-3 mr-1" />
-																{item.serviceName}
-															</Badge>
-														)}
-
-														<Link
-															className="flex items-center gap-2 text-base font-medium hover:underline"
-															target="_blank"
-															href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
-														>
-															{item.host}
-															<ExternalLink className="size-4" />
-														</Link>
-													</div>
-													<div className="flex gap-2">
+												<div className="flex items-center justify-between flex-wrap gap-y-2">
+													{item.serviceName && (
+														<Badge variant="outline" className="w-fit">
+															<Server className="size-3 mr-1" />
+															{item.serviceName}
+														</Badge>
+													)}
+													<div className="flex gap-2 flex-wrap">
 														{!item.host.includes("traefik.me") && (
 															<DnsHelperModal
 																domain={{
@@ -266,6 +255,16 @@ export const ShowDomains = ({ id, type }: Props) => {
 														</DialogAction>
 													</div>
 												</div>
+												<div className="w-full break-all">
+													<Link
+														className="flex items-center gap-2 text-base font-medium hover:underline"
+														target="_blank"
+														href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
+													>
+														{item.host}
+														<ExternalLink className="size-4 min-w-4" />
+													</Link>
+												</div>
 
 												{/* Domain Details */}
 												<div className="flex flex-wrap gap-3">

From 136570b36cd3cf5f4dbefe823fa57eb972b7607a Mon Sep 17 00:00:00 2001
From: Tam Nguyen <tamkhietnguyen1@gmail.com>
Date: Tue, 13 May 2025 16:01:25 +1000
Subject: [PATCH 3/3] fix(ui): compose grid responsiveness starts from xl
 instead of lg

---
 .../project/[projectId]/services/compose/[composeId].tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
index 39f399e94..809095637 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
@@ -217,12 +217,12 @@ const Service = (
 									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
 										<TabsList
 											className={cn(
-												"lg:grid lg:w-fit max-md:overflow-y-scroll justify-start",
+												"xl:grid xl:w-fit max-md:overflow-y-scroll justify-start",
 												isCloud && data?.serverId
-													? "lg:grid-cols-9"
+													? "xl:grid-cols-9"
 													: data?.serverId
-														? "lg:grid-cols-8"
-														: "lg:grid-cols-9",
+														? "xl:grid-cols-8"
+														: "xl:grid-cols-9",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>