Merge pull request #1891 from nktnet1/fix-domain-responsiveness

Fix domain responsiveness

apps/dokploy/components/dashboard/application/domains/show-domains.tsx

@@ -186,30 +186,19 @@ 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">
 												{/* Service & Domain Info */}
-												<div className="flex items-start justify-between">
+												<div className="flex items-center justify-between flex-wrap gap-y-2">
-													<div className="flex flex-col gap-2">
+													{item.serviceName && (
-														{item.serviceName && (
+														<Badge variant="outline" className="w-fit">
-															<Badge variant="outline" className="w-fit">
+															<Server className="size-3 mr-1" />
-																<Server className="size-3 mr-1" />
+															{item.serviceName}
-																{item.serviceName}
+														</Badge>
-															</Badge>
+													)}
-														)}
+													<div className="flex gap-2 flex-wrap">
-
-														<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">
 														{!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">

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"
+														? "xl:grid-cols-8"
-														: "lg:grid-cols-9",
+														: "xl:grid-cols-9",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>