From 7c345d4eaa754353f8cffc903fd9b351c7a2eceb Mon Sep 17 00:00:00 2001
From: Kirill Chuprov <opoxmeloid@gmail.com>
Date: Sat, 18 Apr 2026 15:53:27 +0300
Subject: [PATCH] feat: enhance tab components for service detail pages

- Introduced new class names for service detail tabs to improve layout and responsiveness.
- Updated multiple service detail pages to utilize the new tab styling, ensuring a consistent user experience across applications.
---
 apps/dokploy/components/ui/tabs.tsx           |  8 +++++++
 .../services/application/[applicationId].tsx  | 13 ++++++++---
 .../services/compose/[composeId].tsx          | 13 ++++++++---
 .../services/libsql/[libsqlId].tsx            | 23 ++++++++-----------
 .../services/mariadb/[mariadbId].tsx          | 23 ++++++++-----------
 .../services/mongo/[mongoId].tsx              | 23 ++++++++-----------
 .../services/mysql/[mysqlId].tsx              | 23 ++++++++-----------
 .../services/postgres/[postgresId].tsx        | 23 ++++++++-----------
 .../services/redis/[redisId].tsx              | 23 ++++++++-----------
 9 files changed, 88 insertions(+), 84 deletions(-)

diff --git a/apps/dokploy/components/ui/tabs.tsx b/apps/dokploy/components/ui/tabs.tsx
index ffbbaed192..c73ac67bcc 100644
--- a/apps/dokploy/components/ui/tabs.tsx
+++ b/apps/dokploy/components/ui/tabs.tsx
@@ -3,6 +3,14 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/** Outer row for service detail pages (application, compose, DB services): no horizontal scroll; pairs with {@link serviceDetailTabsListClassName}. */
+export const serviceDetailTabsBarClassName =
+	"flex flex-row items-center w-full gap-4";
+
+/** Tabs wrap on narrow viewports instead of forcing a single scrollable row. */
+export const serviceDetailTabsListClassName =
+	"flex flex-wrap h-auto min-h-10 gap-x-8 gap-y-2 max-md:gap-x-4 max-md:gap-y-2 justify-start";
+
 const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
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 7cb8881718..8a8964af04 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
@@ -47,7 +47,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -229,8 +236,8 @@ const Service = (
 										router.push(newPath);
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full overflow-auto">
-										<TabsList className="flex gap-8 max-md:gap-4 justify-start">
+									<div className={serviceDetailTabsBarClassName}>
+										<TabsList className={serviceDetailTabsListClassName}>
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
 												<TabsTrigger value="environment">
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 e18fa0c16a..ef441dc3d7 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
@@ -43,7 +43,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -217,8 +224,8 @@ const Service = (
 										router.push(newPath);
 									}}
 								>
-									<div className="flex flex-row items-center w-full overflow-auto">
-										<TabsList className="flex gap-8 max-md:gap-4 justify-start">
+									<div className={serviceDetailTabsBarClassName}>
+										<TabsList className={serviceDetailTabsListClassName}>
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
 												<TabsTrigger value="environment">
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 867d4b2346..2da14430d4 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
@@ -34,7 +34,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -42,7 +49,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
-import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 
@@ -174,17 +180,8 @@ const Libsql = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
-										<TabsList
-											className={cn(
-												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												isCloud && data?.serverId
-													? "md:grid-cols-6"
-													: data?.serverId
-														? "md:grid-cols-5"
-														: "md:grid-cols-6",
-											)}
-										>
+									<div className={serviceDetailTabsBarClassName}>
+										<TabsList className={serviceDetailTabsListClassName}>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
 											<TabsTrigger value="logs">Logs</TabsTrigger>
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 4bd3c22e4d..0cb92af2cd 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
@@ -34,7 +34,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -42,7 +49,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
-import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
@@ -188,17 +194,8 @@ const Mariadb = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
-										<TabsList
-											className={cn(
-												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												isCloud && data?.serverId
-													? "md:grid-cols-6"
-													: data?.serverId
-														? "md:grid-cols-5"
-														: "md:grid-cols-6",
-											)}
-										>
+									<div className={serviceDetailTabsBarClassName}>
+										<TabsList className={serviceDetailTabsListClassName}>
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
 												<TabsTrigger value="environment">
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 343177246f..a545e45e0e 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
@@ -34,7 +34,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -42,7 +49,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
-import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
@@ -188,17 +194,8 @@ const Mongo = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
-										<TabsList
-											className={cn(
-												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												isCloud && data?.serverId
-													? "md:grid-cols-6"
-													: data?.serverId
-														? "md:grid-cols-5"
-														: "md:grid-cols-6",
-											)}
-										>
+									<div className={serviceDetailTabsBarClassName}>
+										<TabsList className={serviceDetailTabsListClassName}>
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
 												<TabsTrigger value="environment">
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 cec5df9c94..0c94867186 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
@@ -34,7 +34,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -42,7 +49,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
-import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
@@ -188,17 +194,8 @@ const MySql = (
 											router.push(newPath, undefined, { shallow: true });
 										}}
 									>
-										<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
-											<TabsList
-												className={cn(
-													"md:grid md:w-fit max-md:overflow-y-scroll justify-start ",
-													isCloud && data?.serverId
-														? "md:grid-cols-6"
-														: data?.serverId
-															? "md:grid-cols-5"
-															: "md:grid-cols-6",
-												)}
-											>
+										<div className={serviceDetailTabsBarClassName}>
+											<TabsList className={serviceDetailTabsListClassName}>
 												<TabsTrigger value="general">General</TabsTrigger>
 												{permissions?.envVars.read && (
 													<TabsTrigger value="environment">
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 c95c15e16b..8f8eff900e 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
@@ -34,7 +34,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -42,7 +49,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
-import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
@@ -189,17 +195,8 @@ const Postgresql = (
 										});
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
-										<TabsList
-											className={cn(
-												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												isCloud && data?.serverId
-													? "md:grid-cols-6"
-													: data?.serverId
-														? "md:grid-cols-5"
-														: "md:grid-cols-6",
-											)}
-										>
+									<div className={serviceDetailTabsBarClassName}>
+										<TabsList className={serviceDetailTabsListClassName}>
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
 												<TabsTrigger value="environment">
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 804d99f0f1..16cba9e008 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
@@ -33,7 +33,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	serviceDetailTabsBarClassName,
+	serviceDetailTabsListClassName,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
 import {
 	Tooltip,
 	TooltipContent,
@@ -41,7 +48,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
-import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
@@ -187,17 +193,8 @@ const Redis = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
-										<TabsList
-											className={cn(
-												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												isCloud && data?.serverId
-													? "md:grid-cols-5"
-													: data?.serverId
-														? "md:grid-cols-4"
-														: "md:grid-cols-5",
-											)}
-										>
+									<div className={serviceDetailTabsBarClassName}>
+										<TabsList className={serviceDetailTabsListClassName}>
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
 												<TabsTrigger value="environment">