From c03b9509c83e437b72cfd747c73e186253fa0946 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 11:36:10 -0300
Subject: [PATCH 01/16] fix(ui): resolve dialog infinite render loops with tall
 content

- Force modal=false on all dialogs to prevent Radix UI render loops
- Add React context to share dialog state between components
- Implement custom overlay with proper click-to-close behavior
- Add body scroll lock tied to dialog open state (prevents stuck scroll)
- Create scrollable content wrapper with overscroll-contain
- Remove complex wheel event handlers that caused tab hangs
- Simplify dialog architecture for better maintainability
---
 apps/dokploy/components/ui/dialog.tsx | 105 ++++++++++++++++++++------
 1 file changed, 83 insertions(+), 22 deletions(-)

diff --git a/apps/dokploy/components/ui/dialog.tsx b/apps/dokploy/components/ui/dialog.tsx
index 37e8f685f..8ed1520ed 100644
--- a/apps/dokploy/components/ui/dialog.tsx
+++ b/apps/dokploy/components/ui/dialog.tsx
@@ -1,10 +1,19 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
-
 import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root;
+const DialogContext = React.createContext<{
+	onOpenChange?: (open: boolean) => void;
+	open?: boolean;
+}>({});
+
+const Dialog = ({ onOpenChange, open, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) => (
+	<DialogContext.Provider value={{ onOpenChange, open }}>
+		<DialogPrimitive.Root open={open} onOpenChange={onOpenChange} {...props} modal={false}/>
+	</DialogContext.Provider>
+);
+Dialog.displayName = DialogPrimitive.Root.displayName;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
@@ -30,25 +39,77 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-	<DialogPortal>
-		<DialogOverlay />
-		<DialogPrimitive.Content
-			ref={ref}
-			className={cn(
-				"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-				className,
-			)}
-			{...props}
-		>
-			<div className="space-y-4 w-full">{children}</div>
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-				<X className="h-4 w-4" />
-				<span className="sr-only">Close</span>
-			</DialogPrimitive.Close>
-		</DialogPrimitive.Content>
-	</DialogPortal>
-));
+>(({ className, children, ...props }, ref) => {
+	const contentRef = React.useRef<HTMLDivElement>(null);
+	const { onOpenChange, open } = React.useContext(DialogContext);
+
+	React.useEffect(() => {
+		if (!open) return; 
+		
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		const body = document.body;
+		const originalPaddingRight = body.style.paddingRight;
+		const originalOverflow = body.style.overflow;
+		
+		body.style.overflow = 'hidden';
+		if (scrollbarWidth > 0) {
+			body.style.paddingRight = `${scrollbarWidth}px`;
+		}
+		
+		return () => {
+			body.style.overflow = originalOverflow;
+			body.style.paddingRight = originalPaddingRight;
+		};
+	}, [open]);
+
+	const handleOverlayClick = React.useCallback((e: React.MouseEvent) => {
+		if (e.target === e.currentTarget && onOpenChange) {
+			onOpenChange(false);
+		}
+	}, [onOpenChange]);
+
+	const hasPaddingOverride = className?.includes("p-0");
+	
+	return (
+		<DialogPortal>
+			<div 
+				className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+				onClick={handleOverlayClick}
+			/>
+			<DialogPrimitive.Content
+				ref={ref}
+				className={cn(
+					"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+					"flex flex-col max-h-[90vh]",
+					className,
+				)}
+				onPointerDownOutside={(e) => {
+					const originalEvent = e.detail.originalEvent;
+					const target = originalEvent.target as HTMLElement;
+					if (target.closest('[data-radix-popper-content-wrapper]')) {
+						e.preventDefault();
+					}
+				}}
+				{...props}
+			>
+				<div 
+					ref={contentRef}
+					className={cn(
+						"overflow-y-auto overflow-x-hidden flex-1 min-h-0 overscroll-contain",
+						!hasPaddingOverride && "p-6"
+					)}
+				>
+					{children}
+				</div>
+				
+				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+					<X className="h-4 w-4" />
+					<span className="sr-only">Close</span>
+				</DialogPrimitive.Close>
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -117,4 +178,4 @@ export {
 	DialogFooter,
 	DialogTitle,
 	DialogDescription,
-};
+};
\ No newline at end of file

From 257c0eb1068c2c3d7ba5042ee0d65e5fd6da3737 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 12:14:36 -0300
Subject: [PATCH 02/16] fix(ui): remove max-h-screen and overflow-y-auto from
 service update dialogs

Remove problematic CSS classes that cause infinite render loops in:
- Application update dialog
- Database update dialogs (Redis, MariaDB, MongoDB, PostgreSQL, MySQL)
- Compose update dialog

These classes are now handled internally by the DialogContent component.
---
 .../components/dashboard/application/update-application.tsx     | 2 +-
 apps/dokploy/components/dashboard/compose/update-compose.tsx    | 2 +-
 apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx    | 2 +-
 apps/dokploy/components/dashboard/mongo/update-mongo.tsx        | 2 +-
 apps/dokploy/components/dashboard/mysql/update-mysql.tsx        | 2 +-
 apps/dokploy/components/dashboard/postgres/update-postgres.tsx  | 2 +-
 apps/dokploy/components/dashboard/redis/update-redis.tsx        | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/update-application.tsx b/apps/dokploy/components/dashboard/application/update-application.tsx
index 934a596df..4d4190fa2 100644
--- a/apps/dokploy/components/dashboard/application/update-application.tsx
+++ b/apps/dokploy/components/dashboard/application/update-application.tsx
@@ -99,7 +99,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Application</DialogTitle>
 					<DialogDescription>Update the application data</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/compose/update-compose.tsx b/apps/dokploy/components/dashboard/compose/update-compose.tsx
index c89618601..f9c38a6bc 100644
--- a/apps/dokploy/components/dashboard/compose/update-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/update-compose.tsx
@@ -99,7 +99,7 @@ export const UpdateCompose = ({ composeId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Compose</DialogTitle>
 					<DialogDescription>Update the compose data</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx b/apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx
index 64705b693..9d29d1ac4 100644
--- a/apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx
+++ b/apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx
@@ -97,7 +97,7 @@ export const UpdateMariadb = ({ mariadbId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify MariaDB</DialogTitle>
 					<DialogDescription>Update the MariaDB data</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/mongo/update-mongo.tsx b/apps/dokploy/components/dashboard/mongo/update-mongo.tsx
index d42f406f0..48dbcf4d7 100644
--- a/apps/dokploy/components/dashboard/mongo/update-mongo.tsx
+++ b/apps/dokploy/components/dashboard/mongo/update-mongo.tsx
@@ -99,7 +99,7 @@ export const UpdateMongo = ({ mongoId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify MongoDB</DialogTitle>
 					<DialogDescription>Update the MongoDB data</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/mysql/update-mysql.tsx b/apps/dokploy/components/dashboard/mysql/update-mysql.tsx
index ec3c1b454..9b1296478 100644
--- a/apps/dokploy/components/dashboard/mysql/update-mysql.tsx
+++ b/apps/dokploy/components/dashboard/mysql/update-mysql.tsx
@@ -97,7 +97,7 @@ export const UpdateMysql = ({ mysqlId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify MySQL</DialogTitle>
 					<DialogDescription>Update the MySQL data</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/postgres/update-postgres.tsx b/apps/dokploy/components/dashboard/postgres/update-postgres.tsx
index f70cd8c90..2695953cd 100644
--- a/apps/dokploy/components/dashboard/postgres/update-postgres.tsx
+++ b/apps/dokploy/components/dashboard/postgres/update-postgres.tsx
@@ -99,7 +99,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 					<PenBox className="size-3.5 text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Postgres</DialogTitle>
 					<DialogDescription>Update the Postgres data</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/redis/update-redis.tsx b/apps/dokploy/components/dashboard/redis/update-redis.tsx
index 8d720703e..b04e1ff45 100644
--- a/apps/dokploy/components/dashboard/redis/update-redis.tsx
+++ b/apps/dokploy/components/dashboard/redis/update-redis.tsx
@@ -97,7 +97,7 @@ export const UpdateRedis = ({ redisId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Redis</DialogTitle>
 					<DialogDescription>Update the redis data</DialogDescription>

From c7344190b4939c0f19f6de575bbcbb078264f29c Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 12:14:49 -0300
Subject: [PATCH 03/16] fix(ui): remove max-h-screen and overflow-y-auto from
 deployment dialogs

Remove problematic CSS classes from:
- Application deployment modals
- Docker logs modals
- Swarm application dialogs

Fixes infinite render loops with tall content.
---
 .../dashboard/application/deployments/show-deployment.tsx     | 4 ++--
 .../application/deployments/show-deployments-modal.tsx        | 2 +-
 .../components/dashboard/docker/logs/docker-logs-id.tsx       | 2 +-
 .../components/dashboard/docker/logs/line-count-filter.tsx    | 2 +-
 .../dashboard/docker/logs/show-docker-modal-logs.tsx          | 2 +-
 .../dashboard/docker/logs/show-docker-modal-stack-logs.tsx    | 2 +-
 .../dashboard/swarm/applications/show-applications.tsx        | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index e6fdb38be..83a4b46f4 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -124,7 +124,7 @@ export const ShowDeployment = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription className="flex items-center gap-2">
@@ -158,7 +158,7 @@ export const ShowDeployment = ({
 				<div
 					ref={scrollRef}
 					onScroll={handleScroll}
-					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+					className="h-[720px] space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 				>
 					{" "}
 					{filteredLogs.length > 0 ? (
diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployments-modal.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployments-modal.tsx
index 24446902d..4631a066e 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployments-modal.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployments-modal.tsx
@@ -50,7 +50,7 @@ export const ShowDeploymentsModal = ({
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl p-0">
+			<DialogContent className="sm:max-w-5xl p-0">
 				<ShowDeployments
 					id={id}
 					type={type}
diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 611af355e..80d6fec0d 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -274,7 +274,7 @@ export const DockerLogsId: React.FC<Props> = ({
 					<div
 						ref={scrollRef}
 						onScroll={handleScroll}
-						className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+						className="h-[720px] space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 					>
 						{filteredLogs.length > 0 ? (
 							filteredLogs.map((filteredLog: LogLine, index: number) => (
diff --git a/apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx b/apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx
index dd7b63af5..23b273c86 100644
--- a/apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx
@@ -138,7 +138,7 @@ export function LineCountFilter({
 							}}
 						/>
 					</div>
-					<CommandPrimitive.List className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+					<CommandPrimitive.List className="max-h-[300px] overflow-x-hidden">
 						<CommandPrimitive.Group className="px-2 py-1.5">
 							{lineCountOptions.map((option) => {
 								const isSelected = value === option.value;
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
index 619b25d0c..265005615 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
@@ -40,7 +40,7 @@ export const ShowDockerModalLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+			<DialogContent className=" sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
index 36719bb07..803ea9840 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
@@ -40,7 +40,7 @@ export const ShowDockerModalStackLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+			<DialogContent className=" sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx b/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx
index 7e0f25fed..626e2a282 100644
--- a/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx
+++ b/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx
@@ -87,7 +87,7 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
 					Services
 				</Button>
 			</DialogTrigger>
-			<DialogContent className={"sm:max-w-10xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-10xl"}>
 				<DialogHeader>
 					<DialogTitle>Node Applications</DialogTitle>
 					<DialogDescription>

From 81040c899f730e9e927623b58bf98b78b66fab14 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 12:15:09 -0300
Subject: [PATCH 04/16] fix(ui): remove max-h-screen and overflow-y-auto from
 application feature dialogs

Remove problematic CSS classes from:
- Domain management dialogs
- Preview deployment dialogs
- Schedule configuration dialogs
- Volume backup dialogs

Ensures proper scrolling without render loops.
---
 .../dashboard/application/domains/dns-helper-modal.tsx          | 2 +-
 .../components/dashboard/application/domains/handle-domain.tsx  | 2 +-
 .../application/preview-deployments/add-preview-domain.tsx      | 2 +-
 .../application/preview-deployments/show-preview-settings.tsx   | 2 +-
 .../dashboard/application/schedules/handle-schedules.tsx        | 2 +-
 .../application/volume-backups/handle-volume-backups.tsx        | 2 +-
 .../application/volume-backups/restore-volume-backups.tsx       | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx b/apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx
index e7b2f1877..c67c2fbfc 100644
--- a/apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx
@@ -33,7 +33,7 @@ export const DnsHelperModal = ({ domain, serverIp }: Props) => {
 					<HelpCircle className="size-4" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						<Server className="size-5" />
diff --git a/apps/dokploy/components/dashboard/application/domains/handle-domain.tsx b/apps/dokploy/components/dashboard/application/domains/handle-domain.tsx
index c8522f5f5..9069542d9 100644
--- a/apps/dokploy/components/dashboard/application/domains/handle-domain.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/handle-domain.tsx
@@ -292,7 +292,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx
index 78cd55d7a..bb6f0e0a7 100644
--- a/apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx
@@ -138,7 +138,7 @@ export const AddPreviewDomain = ({
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
index 4c5068eee..ae93ebcc4 100644
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
@@ -138,7 +138,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 						Configure
 					</Button>
 				</DialogTrigger>
-				<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl w-full">
+				<DialogContent className="sm:max-w-5xl w-full">
 					<DialogHeader>
 						<DialogTitle>Preview Deployment Settings</DialogTitle>
 						<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
index 2d26d7a94..24e71bc70 100644
--- a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
@@ -232,7 +232,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 			</DialogTrigger>
 			<DialogContent
 				className={cn(
-					"max-h-screen overflow-y-auto",
+					"overflow-y-auto",
 					scheduleTypeForm === "dokploy-server" || scheduleTypeForm === "server"
 						? "max-h-[95vh] sm:max-w-2xl"
 						: " sm:max-w-lg",
diff --git a/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx b/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx
index bebea61b8..c66b05850 100644
--- a/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx
+++ b/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx
@@ -257,7 +257,7 @@ export const HandleVolumeBackups = ({
 			</DialogTrigger>
 			<DialogContent
 				className={cn(
-					"max-h-screen overflow-y-auto",
+					"overflow-y-auto",
 					volumeBackupType === "compose" || volumeBackupType === "application"
 						? "max-h-[95vh] sm:max-w-2xl"
 						: " sm:max-w-lg",
diff --git a/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx b/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx
index 7c45d0ceb..5b13c61d7 100644
--- a/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx
+++ b/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx
@@ -161,7 +161,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 					Restore Volume Backup
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<RotateCcw className="mr-2 size-4" />

From d78974efc041cc38c35ed95253e67153ca7a6f1f Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 12:15:36 -0300
Subject: [PATCH 05/16] fix(ui): remove max-h-screen and overflow-y-auto from
 advanced settings dialogs

Remove problematic CSS classes from advanced application dialogs:
- Cluster and swarm settings
- Port configuration
- Security settings
- Traefik configuration
- Volume management
- Redirect configuration

Prevents tab hangs with overflow content.
---
 .../application/advanced/cluster/modify-swarm-settings.tsx      | 2 +-
 .../dashboard/application/advanced/import/show-import.tsx       | 2 +-
 .../dashboard/application/advanced/ports/handle-ports.tsx       | 2 +-
 .../application/advanced/redirects/handle-redirect.tsx          | 2 +-
 .../dashboard/application/advanced/security/handle-security.tsx | 2 +-
 .../application/advanced/traefik/show-traefik-config.tsx        | 2 +-
 .../application/advanced/traefik/update-traefik-config.tsx      | 2 +-
 .../dashboard/application/advanced/volumes/add-volumes.tsx      | 2 +-
 .../dashboard/application/advanced/volumes/update-volume.tsx    | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
index ae30a799d..65b436edb 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
@@ -270,7 +270,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					Swarm Settings
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-5xl p-0">
+			<DialogContent className="max-h-[85vh]  sm:max-w-5xl p-0">
 				<DialogHeader className="p-6">
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx b/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
index d44455b27..ecd0b4fe9 100644
--- a/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
@@ -185,7 +185,7 @@ export const ShowImport = ({ composeId }: Props) => {
 								</Button>
 							</div>
 							<Dialog open={showModal} onOpenChange={setShowModal}>
-								<DialogContent className="max-h-[80vh] max-w-[50vw] overflow-y-auto">
+								<DialogContent className="max-h-[80vh] max-w-[50vw]">
 									<DialogHeader>
 										<DialogTitle className="text-2xl font-bold">
 											Template Information
diff --git a/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx b/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
index ad0c0ac3c..eded628c9 100644
--- a/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
@@ -124,7 +124,7 @@ export const HandlePorts = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className=" sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Ports</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/redirects/handle-redirect.tsx b/apps/dokploy/components/dashboard/application/advanced/redirects/handle-redirect.tsx
index 5d91d580d..253a8c24d 100644
--- a/apps/dokploy/components/dashboard/application/advanced/redirects/handle-redirect.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/redirects/handle-redirect.tsx
@@ -179,7 +179,7 @@ export const HandleRedirect = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Redirects</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx b/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
index e7bc0cd1f..e1cf20b78 100644
--- a/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
@@ -114,7 +114,7 @@ export const HandleSecurity = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className=" sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
index 58601fb49..9653721a2 100644
--- a/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
@@ -48,7 +48,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 relative">
-						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
+						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem]">
 							<CodeEditor
 								lineWrapping
 								value={data || "Empty"}
diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
index f563f1ab4..0dd0406b2 100644
--- a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 			<DialogTrigger asChild>
 				<Button isLoading={isLoading}>Modify</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className=" sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update traefik config</DialogTitle>
 					<DialogDescription>Update the traefik config</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx b/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
index 639410bb4..8a5e1fec4 100644
--- a/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
@@ -151,7 +151,7 @@ export const AddVolumes = ({
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className=" sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Volumes / Mounts</DialogTitle>
 				</DialogHeader>
diff --git a/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx b/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
index d185b2160..1a9b63cad 100644
--- a/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
@@ -186,7 +186,7 @@ export const UpdateVolume = ({
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className=" sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Update</DialogTitle>
 					<DialogDescription>Update the mount</DialogDescription>

From 2d382ea1be32f8747443b7c75c3ee10b37c9f710 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 12:16:35 -0300
Subject: [PATCH 06/16] fix(ui): remove max-h-screen and overflow-y-auto from
 settings dialogs

Remove problematic CSS classes from system settings:
- Git provider configurations
- User management dialogs
- API key management
- Certificate management
- Notification settings
- Server management dialogs
- Profile and 2FA settings

Fixes render loops in admin panels.
---
 .../dokploy/components/dashboard/settings/api/add-api-key.tsx | 2 +-
 .../dashboard/settings/billing/show-welcome-dokploy.tsx       | 2 +-
 .../dashboard/settings/certificates/add-certificate.tsx       | 2 +-
 .../components/dashboard/settings/cluster/nodes/add-node.tsx  | 2 +-
 .../dashboard/settings/cluster/nodes/show-node-data.tsx       | 2 +-
 .../dashboard/settings/cluster/nodes/show-nodes-modal.tsx     | 2 +-
 .../dashboard/settings/cluster/registry/handle-registry.tsx   | 2 +-
 .../dashboard/settings/destination/handle-destinations.tsx    | 2 +-
 .../settings/git/bitbucket/add-bitbucket-provider.tsx         | 2 +-
 .../settings/git/bitbucket/edit-bitbucket-provider.tsx        | 2 +-
 .../dashboard/settings/git/gitea/add-gitea-provider.tsx       | 2 +-
 .../dashboard/settings/git/github/edit-github-provider.tsx    | 2 +-
 .../dashboard/settings/git/gitlab/add-gitlab-provider.tsx     | 2 +-
 .../dashboard/settings/git/gitlab/edit-gitlab-provider.tsx    | 2 +-
 .../dashboard/settings/notifications/handle-notifications.tsx | 2 +-
 .../components/dashboard/settings/profile/enable-2fa.tsx      | 2 +-
 .../settings/servers/actions/show-server-actions.tsx          | 2 +-
 .../components/dashboard/settings/servers/edit-script.tsx     | 2 +-
 .../dashboard/settings/servers/gpu-support-modal.tsx          | 2 +-
 .../components/dashboard/settings/servers/setup-server.tsx    | 4 ++--
 .../settings/servers/show-docker-containers-modal.tsx         | 2 +-
 .../dashboard/settings/servers/show-monitoring-modal.tsx      | 2 +-
 .../dashboard/settings/servers/show-schedules-modal.tsx       | 2 +-
 .../dashboard/settings/servers/show-swarm-overview-modal.tsx  | 2 +-
 .../settings/servers/show-traefik-file-system-modal.tsx       | 2 +-
 .../settings/servers/welcome-stripe/create-ssh-key.tsx        | 2 +-
 .../settings/servers/welcome-stripe/welcome-suscription.tsx   | 2 +-
 .../dashboard/settings/ssh-keys/handle-ssh-keys.tsx           | 2 +-
 .../components/dashboard/settings/users/add-invitation.tsx    | 2 +-
 .../components/dashboard/settings/users/add-permissions.tsx   | 2 +-
 .../dashboard/settings/web-server/docker-terminal-modal.tsx   | 2 +-
 .../dashboard/settings/web-server/edit-traefik-env.tsx        | 2 +-
 .../dashboard/settings/web-server/show-modal-logs.tsx         | 2 +-
 .../dashboard/settings/web-server/terminal-modal.tsx          | 2 +-
 34 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/api/add-api-key.tsx b/apps/dokploy/components/dashboard/settings/api/add-api-key.tsx
index 568b86e94..2baa0ff6b 100644
--- a/apps/dokploy/components/dashboard/settings/api/add-api-key.tsx
+++ b/apps/dokploy/components/dashboard/settings/api/add-api-key.tsx
@@ -142,7 +142,7 @@ export const AddApiKey = () => {
 				<DialogTrigger asChild>
 					<Button>Generate New Key</Button>
 				</DialogTrigger>
-				<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
+				<DialogContent className="sm:max-w-xl max-h-[90vh]">
 					<DialogHeader>
 						<DialogTitle>Generate API Key</DialogTitle>
 						<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/billing/show-welcome-dokploy.tsx b/apps/dokploy/components/dashboard/settings/billing/show-welcome-dokploy.tsx
index 64362b25c..845cbe49d 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-welcome-dokploy.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-welcome-dokploy.tsx
@@ -41,7 +41,7 @@ export const ShowWelcomeDokploy = () => {
 	return (
 		<>
 			<Dialog open={open} onOpenChange={handleClose}>
-				<DialogContent className="sm:max-w-xl max-h-screen overflow-y-auto">
+				<DialogContent className="sm:max-w-xl">
 					<DialogHeader>
 						<DialogTitle className="text-2xl font-semibold text-center">
 							Welcome to Dokploy Cloud 🎉
diff --git a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
index 58cad7910..2e0b29da8 100644
--- a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
@@ -106,7 +106,7 @@ export const AddCertificate = () => {
 					Add Certificate
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className=" sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add New Certificate</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx b/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
index 63fb17dda..07389e0cc 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
@@ -27,7 +27,7 @@ export const AddNode = ({ serverId }: Props) => {
 					Add Node
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className=" sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Add Node</DialogTitle>
 					<DialogDescription className="flex flex-col gap-2">
diff --git a/apps/dokploy/components/dashboard/settings/cluster/nodes/show-node-data.tsx b/apps/dokploy/components/dashboard/settings/cluster/nodes/show-node-data.tsx
index e2adbed76..86635810c 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/nodes/show-node-data.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/nodes/show-node-data.tsx
@@ -24,7 +24,7 @@ export const ShowNodeData = ({ data }: Props) => {
 					View Config
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Node Config</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx b/apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx
index 5f0b32fc3..3ba0a8567 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx
@@ -20,7 +20,7 @@ export const ShowNodesModal = ({ serverId }: Props) => {
 					Show Swarm Nodes
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="min-w-[70vw] overflow-y-auto max-h-screen">
+			<DialogContent className="min-w-[70vw]">
 				<div className="grid w-full gap-1">
 					<ShowNodes serverId={serverId} />
 				</div>
diff --git a/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx b/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx
index d30ad6dda..f27902c34 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx
@@ -161,7 +161,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl max-h-screen overflow-y-auto">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add a external registry</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
index aedf87445..8c5ce20ea 100644
--- a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
+++ b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
@@ -204,7 +204,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className=" sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>
 						{destinationId ? "Update" : "Add"} Destination
diff --git a/apps/dokploy/components/dashboard/settings/git/bitbucket/add-bitbucket-provider.tsx b/apps/dokploy/components/dashboard/settings/git/bitbucket/add-bitbucket-provider.tsx
index 0df2d0610..bd4179009 100644
--- a/apps/dokploy/components/dashboard/settings/git/bitbucket/add-bitbucket-provider.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/bitbucket/add-bitbucket-provider.tsx
@@ -97,7 +97,7 @@ export const AddBitbucketProvider = () => {
 					<span>Bitbucket</span>
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Bitbucket Provider <BitbucketIcon className="size-5" />
diff --git a/apps/dokploy/components/dashboard/settings/git/bitbucket/edit-bitbucket-provider.tsx b/apps/dokploy/components/dashboard/settings/git/bitbucket/edit-bitbucket-provider.tsx
index e5a7f7529..12744b7cb 100644
--- a/apps/dokploy/components/dashboard/settings/git/bitbucket/edit-bitbucket-provider.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/bitbucket/edit-bitbucket-provider.tsx
@@ -105,7 +105,7 @@ export const EditBitbucketProvider = ({ bitbucketId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Update Bitbucket <BitbucketIcon className="size-5" />
diff --git a/apps/dokploy/components/dashboard/settings/git/gitea/add-gitea-provider.tsx b/apps/dokploy/components/dashboard/settings/git/gitea/add-gitea-provider.tsx
index 13c65bdf3..81530549c 100644
--- a/apps/dokploy/components/dashboard/settings/git/gitea/add-gitea-provider.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/gitea/add-gitea-provider.tsx
@@ -143,7 +143,7 @@ export const AddGiteaProvider = () => {
 					<span>Gitea</span>
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Gitea Provider <GiteaIcon className="size-5" />
diff --git a/apps/dokploy/components/dashboard/settings/git/github/edit-github-provider.tsx b/apps/dokploy/components/dashboard/settings/git/github/edit-github-provider.tsx
index 28c6e1233..e04d3e718 100644
--- a/apps/dokploy/components/dashboard/settings/git/github/edit-github-provider.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/github/edit-github-provider.tsx
@@ -92,7 +92,7 @@ export const EditGithubProvider = ({ githubId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Update Github <GithubIcon className="size-5" />
diff --git a/apps/dokploy/components/dashboard/settings/git/gitlab/add-gitlab-provider.tsx b/apps/dokploy/components/dashboard/settings/git/gitlab/add-gitlab-provider.tsx
index 023e46ed2..3b4fc60f6 100644
--- a/apps/dokploy/components/dashboard/settings/git/gitlab/add-gitlab-provider.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/gitlab/add-gitlab-provider.tsx
@@ -115,7 +115,7 @@ export const AddGitlabProvider = () => {
 					<span>GitLab</span>
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-2xl  ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						GitLab Provider <GitlabIcon className="size-5" />
diff --git a/apps/dokploy/components/dashboard/settings/git/gitlab/edit-gitlab-provider.tsx b/apps/dokploy/components/dashboard/settings/git/gitlab/edit-gitlab-provider.tsx
index 5142a3fe4..a2e33cdfb 100644
--- a/apps/dokploy/components/dashboard/settings/git/gitlab/edit-gitlab-provider.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/gitlab/edit-gitlab-provider.tsx
@@ -105,7 +105,7 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Update GitLab <GitlabIcon className="size-5" />
diff --git a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
index cfa0ca83c..f7c798335 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
@@ -408,7 +408,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className=" sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>
 						{notificationId ? "Update" : "Add"} Notification
diff --git a/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx b/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx
index afc859f41..5fd8ffc9c 100644
--- a/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx
@@ -186,7 +186,7 @@ export const Enable2FA = () => {
 					Enable 2FA
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
+			<DialogContent className="sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>2FA Setup</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx b/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx
index fcc0e315f..054ef66b2 100644
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx
@@ -26,7 +26,7 @@ export const ShowServerActions = ({ serverId }: Props) => {
 					View Actions
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-xl overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-xl">
 				<div className="flex flex-col gap-1">
 					<DialogTitle className="text-xl">Web server settings</DialogTitle>
 					<DialogDescription>Reload or clean the web server.</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx b/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
index 6225ee771..02ea9b7d1 100644
--- a/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
@@ -99,7 +99,7 @@ export const EditScript = ({ serverId }: Props) => {
 					<FileTerminal className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl overflow-x-hidden">
+			<DialogContent className="sm:max-w-5xl overflow-x-hidden">
 				<DialogHeader>
 					<DialogTitle>Modify Script</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/servers/gpu-support-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/gpu-support-modal.tsx
index 9cf858cd3..9196869d5 100644
--- a/apps/dokploy/components/dashboard/settings/servers/gpu-support-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/gpu-support-modal.tsx
@@ -22,7 +22,7 @@ export const GPUSupportModal = () => {
 					<span>GPU Setup</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-4xl overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Dokploy Server GPU Setup
diff --git a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
index 751167a42..b2c87c39f 100644
--- a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -88,7 +88,7 @@ export const SetupServer = ({ serverId }: Props) => {
 					Setup Server
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-4xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-4xl  ">
 				<DialogHeader>
 					<div className="flex flex-col gap-1.5">
 						<DialogTitle className="flex items-center gap-2">
@@ -147,7 +147,7 @@ export const SetupServer = ({ serverId }: Props) => {
 										<li>2. Add The SSH Key to Server Manually</li>
 									</ul>
 									<div className="flex flex-col gap-4 w-full overflow-auto">
-										<div className="flex relative flex-col gap-2 overflow-y-auto">
+										<div className="flex relative flex-col gap-2">
 											<div className="text-sm text-primary flex flex-row gap-2 items-center">
 												Copy Public Key ({server?.sshKey?.name})
 												<button
diff --git a/apps/dokploy/components/dashboard/settings/servers/show-docker-containers-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/show-docker-containers-modal.tsx
index ad82085c7..1d313d568 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-docker-containers-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-docker-containers-modal.tsx
@@ -20,7 +20,7 @@ export const ShowDockerContainersModal = ({ serverId }: Props) => {
 					Show Docker Containers
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<div className="grid w-full gap-1">
 					<ShowContainers serverId={serverId} />
 				</div>
diff --git a/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx
index 2a582ae1c..11ddaea1d 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx
@@ -21,7 +21,7 @@ export const ShowMonitoringModal = ({ url, token }: Props) => {
 					Show Monitoring
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<div className="flex gap-4 py-4 w-full">
 					<ShowPaidMonitoring BASE_URL={url} token={token} />
 				</div>
diff --git a/apps/dokploy/components/dashboard/settings/servers/show-schedules-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/show-schedules-modal.tsx
index 6f6a1a6d0..3c91b1f32 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-schedules-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-schedules-modal.tsx
@@ -20,7 +20,7 @@ export const ShowSchedulesModal = ({ serverId }: Props) => {
 					Show Schedules
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-5xl  ">
 				<ShowSchedules id={serverId} scheduleType="server" />
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx
index b86311840..c0047a9ea 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx
@@ -20,7 +20,7 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
 					Show Swarm Overview
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<div className="grid w-full gap-1">
 					<SwarmMonitorCard serverId={serverId} />
 				</div>
diff --git a/apps/dokploy/components/dashboard/settings/servers/show-traefik-file-system-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/show-traefik-file-system-modal.tsx
index 0c5763605..74b700b6e 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-traefik-file-system-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-traefik-file-system-modal.tsx
@@ -20,7 +20,7 @@ export const ShowTraefikFileSystemModal = ({ serverId }: Props) => {
 					Show Traefik File System
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<ShowTraefikSystem serverId={serverId} />
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
index b1a3f2d03..22c9f4ebf 100644
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
@@ -117,7 +117,7 @@ export const CreateSSHKey = () => {
 										Option 2
 									</span>
 									<div className="flex flex-col gap-4 w-full overflow-auto">
-										<div className="flex relative flex-col gap-2 overflow-y-auto">
+										<div className="flex relative flex-col gap-2">
 											<div className="text-sm text-primary flex flex-row gap-2 items-center">
 												Copy Public Key
 												<button
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
index 1ec4f2ab9..3b8f23514 100644
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
@@ -60,7 +60,7 @@ export const WelcomeSuscription = () => {
 
 	return (
 		<Dialog open={isOpen}>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-7xl min-h-[75vh]">
+			<DialogContent className="sm:max-w-7xl min-h-[75vh]">
 				{showConfetti ?? "Flaso"}
 				<div className="flex justify-center items-center w-full">
 					{showConfetti && (
diff --git a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
index 0c3f3529f..5d85f28bd 100644
--- a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
+++ b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
@@ -152,7 +152,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className=" sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>SSH Key</DialogTitle>
 					<DialogDescription className="space-y-4">
diff --git a/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx b/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
index 24e8f34e6..1542a778f 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
@@ -108,7 +108,7 @@ export const AddInvitation = () => {
 					<PlusIcon className="h-4 w-4" /> Add Invitation
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className=" sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add Invitation</DialogTitle>
 					<DialogDescription>Invite a new user</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
index 51d73b1f9..8f527ec0b 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
@@ -123,7 +123,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 					Add Permissions
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className="max-h-[85vh]  sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Permissions</DialogTitle>
 					<DialogDescription>Add or remove permissions</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx b/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
index 44dda0d36..e4ee83753 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
@@ -83,7 +83,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
 			<DialogTrigger asChild>{children}</DialogTrigger>
 			<DialogContent
-				className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl"
+				className="max-h-[85vh]    sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx b/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
index 07dc24078..8262b9cbc 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
@@ -78,7 +78,7 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className=" sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update Traefik Environment</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
index aa7a33979..524b29616 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
@@ -67,7 +67,7 @@ export const ShowModalLogs = ({
 	return (
 		<Dialog>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-7xl">
+			<DialogContent className="max-h-[85vh]  sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {appName}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
index 7c64ebc09..2de0074c1 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
@@ -53,7 +53,7 @@ export const TerminalModal = ({ children, serverId }: Props) => {
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				className="max-h-screen  overflow-y-auto sm:max-w-7xl"
+				className=" sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader className="flex flex-col gap-1">

From 96d08106075f8e8bb6c4b000e7da0e89d812ea0b Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 12:16:51 -0300
Subject: [PATCH 07/16] fix(ui): remove max-h-screen and overflow-y-auto from
 project and database dialogs

Remove problematic CSS classes from:
- Project creation and management dialogs
- Database backup and restore dialogs
- Compose service management dialogs
- Template and AI generator dialogs

Ensures stable dialog behavior.
---
 apps/dokploy/components/dashboard/compose/delete-service.tsx  | 2 +-
 .../dashboard/compose/general/show-converted-compose.tsx      | 2 +-
 .../components/dashboard/compose/general/show-utilities.tsx   | 2 +-
 .../components/dashboard/database/backups/handle-backup.tsx   | 2 +-
 .../components/dashboard/database/backups/restore-backup.tsx  | 2 +-
 apps/dokploy/components/dashboard/project/add-application.tsx | 2 +-
 apps/dokploy/components/dashboard/project/add-compose.tsx     | 2 +-
 apps/dokploy/components/dashboard/project/add-database.tsx    | 2 +-
 apps/dokploy/components/dashboard/project/add-template.tsx    | 2 +-
 .../components/dashboard/project/ai/template-generator.tsx    | 2 +-
 .../components/dashboard/project/duplicate-project.tsx        | 2 +-
 .../components/dashboard/projects/project-environment.tsx     | 2 +-
 apps/dokploy/components/dashboard/projects/show.tsx           | 4 ++--
 13 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/dokploy/components/dashboard/compose/delete-service.tsx b/apps/dokploy/components/dashboard/compose/delete-service.tsx
index 212b5ac73..65689afd1 100644
--- a/apps/dokploy/components/dashboard/compose/delete-service.tsx
+++ b/apps/dokploy/components/dashboard/compose/delete-service.tsx
@@ -126,7 +126,7 @@ export const DeleteService = ({ id, type }: Props) => {
 					<Trash2 className="size-4 text-primary group-hover:text-red-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Are you absolutely sure?</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx b/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
index 4370dcf87..677762b00 100644
--- a/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					Preview Compose
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
+			<DialogContent className="sm:max-w-6xl max-h-[50rem]">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/compose/general/show-utilities.tsx b/apps/dokploy/components/dashboard/compose/general/show-utilities.tsx
index 214102ce9..6df800494 100644
--- a/apps/dokploy/components/dashboard/compose/general/show-utilities.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/show-utilities.tsx
@@ -23,7 +23,7 @@ export const ShowUtilities = ({ composeId }: Props) => {
 			<DialogTrigger asChild>
 				<Button variant="ghost">Show Utilities</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
+			<DialogContent className="sm:max-w-5xl">
 				<DialogHeader>
 					<DialogTitle>Utilities </DialogTitle>
 					<DialogDescription>Modify the application data</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx b/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
index ca2cd27fb..4c5bbe628 100644
--- a/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
@@ -329,7 +329,7 @@ export const HandleBackup = ({
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl max-h-screen overflow-y-auto">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>
 						{backupId ? "Update Backup" : "Create Backup"}
diff --git a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
index 76ab7b6cf..a173f85ad 100644
--- a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
@@ -324,7 +324,7 @@ export const RestoreBackup = ({
 					Restore Backup
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<RotateCcw className="mr-2 size-4" />
diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx
index 6b0a690db..3150d8046 100644
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -119,7 +119,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 					<span>Application</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className=" sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Create</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/project/add-compose.tsx b/apps/dokploy/components/dashboard/project/add-compose.tsx
index 5f2bb137f..1db73a80b 100644
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -124,7 +124,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 					<span>Compose</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-xl">
+			<DialogContent className=" sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>Create Compose</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/project/add-database.tsx b/apps/dokploy/components/dashboard/project/add-database.tsx
index 2420e603f..b4ac685dc 100644
--- a/apps/dokploy/components/dashboard/project/add-database.tsx
+++ b/apps/dokploy/components/dashboard/project/add-database.tsx
@@ -283,7 +283,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 					<span>Database</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen md:max-h-[90vh]  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="md:max-h-[90vh]  sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Databases</DialogTitle>
 				</DialogHeader>
diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index 8e9de54d9..53ae30141 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -148,7 +148,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 					<span>Template</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen sm:max-w-[90vw] p-0">
+			<DialogContent className="sm:max-w-[90vw] p-0">
 				<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
 					<div className="flex flex-col space-y-6">
 						<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
diff --git a/apps/dokploy/components/dashboard/project/ai/template-generator.tsx b/apps/dokploy/components/dashboard/project/ai/template-generator.tsx
index 7fad2e35d..714840c5a 100644
--- a/apps/dokploy/components/dashboard/project/ai/template-generator.tsx
+++ b/apps/dokploy/components/dashboard/project/ai/template-generator.tsx
@@ -158,7 +158,7 @@ export const TemplateGenerator = ({ projectId }: Props) => {
 					<span>AI Assistant</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl w-full  flex flex-col">
+			<DialogContent className="sm:max-w-4xl w-full  flex flex-col">
 				<DialogHeader>
 					<DialogTitle>AI Assistant</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/project/duplicate-project.tsx b/apps/dokploy/components/dashboard/project/duplicate-project.tsx
index ffcfeba87..74001bd41 100644
--- a/apps/dokploy/components/dashboard/project/duplicate-project.tsx
+++ b/apps/dokploy/components/dashboard/project/duplicate-project.tsx
@@ -167,7 +167,7 @@ export const DuplicateProject = ({
 
 					<div className="grid gap-2">
 						<Label>Selected services to duplicate</Label>
-						<div className="space-y-2 max-h-[200px] overflow-y-auto border rounded-md p-4">
+						<div className="space-y-2 max-h-[200px] border rounded-md p-4">
 							{selectedServices.map((service) => (
 								<div key={service.id} className="flex items-center space-x-2">
 									<span className="text-sm">
diff --git a/apps/dokploy/components/dashboard/projects/project-environment.tsx b/apps/dokploy/components/dashboard/projects/project-environment.tsx
index e43d1af87..21c2c9b58 100644
--- a/apps/dokploy/components/dashboard/projects/project-environment.tsx
+++ b/apps/dokploy/components/dashboard/projects/project-environment.tsx
@@ -94,7 +94,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 					</DropdownMenuItem>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-6xl">
+			<DialogContent className="sm:max-w-6xl">
 				<DialogHeader>
 					<DialogTitle>Project Environment</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
index 03ebe7a85..2de242e63 100644
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -157,7 +157,7 @@ export const ShowProjects = () => {
 																		</Button>
 																	</DropdownMenuTrigger>
 																	<DropdownMenuContent
-																		className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]"
+																		className="w-[200px] space-y-2 max-h-[400px]"
 																		onClick={(e) => e.stopPropagation()}
 																	>
 																		{project.applications.length > 0 && (
@@ -265,7 +265,7 @@ export const ShowProjects = () => {
 																				</Button>
 																			</DropdownMenuTrigger>
 																			<DropdownMenuContent
-																				className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]"
+																				className="w-[200px] space-y-2 max-h-[280px]"
 																				onClick={(e) => e.stopPropagation()}
 																			>
 																				<DropdownMenuLabel className="font-normal">

From fa5994bd47f915b812afabaac0fddfaff676e505 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 12:17:05 -0300
Subject: [PATCH 08/16] fix(ui): remove max-h-screen and overflow-y-auto from
 remaining dialogs

Clean up any remaining dialog components with problematic CSS classes.
Complete removal of classes that interfere with new scroll handling system.
---
 .../dashboard/docker/config/show-container-config.tsx         | 2 +-
 .../dashboard/docker/terminal/docker-terminal-modal.tsx       | 2 +-
 .../components/dashboard/swarm/details/show-node-config.tsx   | 2 +-
 apps/dokploy/components/dashboard/swarm/monitoring-card.tsx   | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/config/show-container-config.tsx b/apps/dokploy/components/dashboard/docker/config/show-container-config.tsx
index 1f1591c9d..07c9556f7 100644
--- a/apps/dokploy/components/dashboard/docker/config/show-container-config.tsx
+++ b/apps/dokploy/components/dashboard/docker/config/show-container-config.tsx
@@ -42,7 +42,7 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 						See in detail the config of this container
 					</DialogDescription>
 				</DialogHeader>
-				<div className="text-wrap rounded-lg border p-4 text-sm bg-card overflow-y-auto max-h-[80vh]">
+				<div className="text-wrap rounded-lg border p-4 text-sm bg-card max-h-[80vh]">
 					<code>
 						<pre className="whitespace-pre-wrap break-words">
 							<CodeEditor
diff --git a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
index 90aa2b406..ac93b84f1 100644
--- a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
@@ -60,7 +60,7 @@ export const DockerTerminalModal = ({
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				className="max-h-screen  overflow-y-auto sm:max-w-7xl"
+				className=" sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader>
diff --git a/apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx b/apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx
index 7f27fe3bf..6f92a2aa7 100644
--- a/apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx
+++ b/apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx
@@ -29,7 +29,7 @@ export const ShowNodeConfig = ({ nodeId, serverId }: Props) => {
 					Config
 				</Button>
 			</DialogTrigger>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Node Config</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
index 5ab936102..8e1618bea 100644
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -128,7 +128,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 										</div>
 									</TooltipTrigger>
 									<TooltipContent>
-										<div className="max-h-48 overflow-y-auto">
+										<div className="max-h-48">
 											{activeNodes.map((node) => (
 												<div key={node.ID} className="flex items-center gap-2">
 													{node.Hostname}
@@ -162,7 +162,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 										</div>
 									</TooltipTrigger>
 									<TooltipContent>
-										<div className="max-h-48 overflow-y-auto">
+										<div className="max-h-48">
 											{managerNodes.map((node) => (
 												<div key={node.ID} className="flex items-center gap-2">
 													{node.Hostname}

From a8fc052cbfe25a5a0d279ccbdf383fd24c493d5f Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 13:00:21 -0300
Subject: [PATCH 09/16] fix(ui): resolve dialog closing issues with Command
 components

- Replace custom overlay click handler with proper onInteractOutside
- Add detection for Command components to prevent unwanted closures
- Restore overlay visibility without click handler conflicts
- Separate DialogFooter from scrollable content for proper spacing
- Add border and padding to DialogFooter container for visual separation

Fixes dialogs closing unexpectedly when used inside Command menus.
---
 apps/dokploy/components/ui/dialog.tsx | 44 +++++++++++++++++++--------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/apps/dokploy/components/ui/dialog.tsx b/apps/dokploy/components/ui/dialog.tsx
index 8ed1520ed..52bbe9790 100644
--- a/apps/dokploy/components/ui/dialog.tsx
+++ b/apps/dokploy/components/ui/dialog.tsx
@@ -62,20 +62,28 @@ const DialogContent = React.forwardRef<
 		};
 	}, [open]);
 
-	const handleOverlayClick = React.useCallback((e: React.MouseEvent) => {
-		if (e.target === e.currentTarget && onOpenChange) {
+	// Handle outside interactions properly with Command components
+	const handleInteractOutside = React.useCallback((e: Event) => {
+		if (onOpenChange) {
 			onOpenChange(false);
 		}
 	}, [onOpenChange]);
 
 	const hasPaddingOverride = className?.includes("p-0");
 	
+	// Separate DialogFooter from other children for proper layout
+	const childrenArray = React.Children.toArray(children);
+	const dialogFooter = childrenArray.find((child) => 
+		React.isValidElement(child) && child.type === DialogFooter
+	);
+	const otherChildren = childrenArray.filter((child) => 
+		!(React.isValidElement(child) && child.type === DialogFooter)
+	);
+	
 	return (
 		<DialogPortal>
-			<div 
-				className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-				onClick={handleOverlayClick}
-			/>
+			{/* Custom overlay for modal=false - no click handler to avoid Command conflicts */}
+			<div className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
 			<DialogPrimitive.Content
 				ref={ref}
 				className={cn(
@@ -83,12 +91,17 @@ const DialogContent = React.forwardRef<
 					"flex flex-col max-h-[90vh]",
 					className,
 				)}
-				onPointerDownOutside={(e) => {
-					const originalEvent = e.detail.originalEvent;
-					const target = originalEvent.target as HTMLElement;
-					if (target.closest('[data-radix-popper-content-wrapper]')) {
+				onInteractOutside={(e) => {
+					const target = e.target as HTMLElement;
+					// Don't close when clicking inside popovers, dropdowns, or command components
+					if (target.closest('[data-radix-popper-content-wrapper]') || 
+					    target.closest('[cmdk-root]') ||
+					    target.closest('[data-radix-command-root]')) {
 						e.preventDefault();
+						return;
 					}
+					// Use our custom handler for modal=false behavior
+					handleInteractOutside(e);
 				}}
 				{...props}
 			>
@@ -99,9 +112,16 @@ const DialogContent = React.forwardRef<
 						!hasPaddingOverride && "p-6"
 					)}
 				>
-					{children}
+					{otherChildren}
 				</div>
 				
+				{/* DialogFooter outside scrollable area with proper spacing */}
+				{dialogFooter && (
+					<div className="p-6 pt-0 border-t border-border/50">
+						{dialogFooter}
+					</div>
+				)}
+				
 				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 					<X className="h-4 w-4" />
 					<span className="sr-only">Close</span>
@@ -132,7 +152,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={cn(
-			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			"flex flex-col-reverse mt-4 sm:flex-row sm:justify-end sm:space-x-2",
 			className,
 		)}
 		{...props}

From baadba542faeb73e3678ad12736ca26acc9cda1d Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 13:01:36 -0300
Subject: [PATCH 10/16] fix(ui): update DialogFooter styling in cluster
 management dialogs

- Add responsive layout and proper spacing to swarm settings footer
- Update registry dialog footer with improved flex layout
- Ensure proper button alignment on mobile and desktop
- Add sticky positioning for better UX in long forms
---
 .../application/advanced/cluster/modify-swarm-settings.tsx    | 4 ++--
 .../dashboard/settings/cluster/registry/handle-registry.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
index 65b436edb..1e120322d 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
@@ -270,7 +270,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					Swarm Settings
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  sm:max-w-5xl p-0">
+			<DialogContent className="sm:max-w-5xl p-0">
 				<DialogHeader className="p-6">
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
@@ -753,7 +753,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							)}
 						/>
 
-						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border p-2 ">
+						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border">
 							<Button
 								isLoading={isLoading}
 								form="hook-form-add-permissions"
diff --git a/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx b/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx
index f27902c34..ab51ab579 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx
@@ -316,7 +316,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
 							/>
 						</div>
 
-						<DialogFooter className="flex flex-col w-full sm:justify-between gap-4 flex-wrap sm:flex-col col-span-2 mt-6">
+						<DialogFooter className="flex flex-col w-full sm:justify-between gap-4 flex-wrap sm:flex-col col-span-2">
 							<div className="flex flex-row gap-2 justify-between">
 								<Button
 									type="button"

From b12c035527a666dd80fa63ece685a8275d9e4766 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 13:03:11 -0300
Subject: [PATCH 11/16] fix(ui): improve DialogFooter layout in settings
 dialogs

- Update certificate management dialog footer styling
- Enhance destination settings dialog layout
- Improve notification settings dialog footer spacing
- Add responsive design improvements for server creation dialog

Ensures consistent footer behavior across settings panels.
---
 .../dashboard/settings/certificates/add-certificate.tsx         | 2 +-
 .../dashboard/settings/destination/handle-destinations.tsx      | 2 +-
 .../dashboard/settings/notifications/handle-notifications.tsx   | 2 +-
 .../dashboard/settings/servers/welcome-stripe/create-server.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
index 2e0b29da8..b7f7749c1 100644
--- a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
@@ -222,7 +222,7 @@ export const AddCertificate = () => {
 						/>
 					</form>
 
-					<DialogFooter className="flex w-full flex-row !justify-end pt-3">
+					<DialogFooter className="flex w-full flex-row !justify-end">
 						<Button
 							isLoading={isLoading}
 							form="hook-form-add-certificate"
diff --git a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
index 8c5ce20ea..a23912f08 100644
--- a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
+++ b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
@@ -359,7 +359,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 					<DialogFooter
 						className={cn(
 							isCloud ? "!flex-col" : "flex-row",
-							"flex w-full  !justify-between pt-3 gap-4",
+							"flex w-full  !justify-between gap-4",
 						)}
 					>
 						{isCloud ? (
diff --git a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
index f7c798335..18fe7f391 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
@@ -408,7 +408,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>
 						{notificationId ? "Update" : "Add"} Notification
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx
index 24d01553b..3a112af20 100644
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx
@@ -265,7 +265,7 @@ export const CreateServer = ({ stepper }: Props) => {
 						/>
 					</form>
 
-					<DialogFooter className="pt-5">
+					<DialogFooter>
 						<Button
 							isLoading={form.formState.isSubmitting}
 							disabled={!canCreateMoreServers}

From 2209d44ea5eea2ded8d80ce52b06eb22c5669f53 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 13:03:24 -0300
Subject: [PATCH 12/16] fix(ui): update remaining dialog components with
 improved layouts

- Fix application import dialog positioning
- Update organization management dialog styling
- Ensure consistent DialogFooter behavior across all components

Completes the dialog layout improvements for better spacing and positioning.
---
 .../dashboard/application/advanced/import/show-import.tsx       | 2 +-
 .../components/dashboard/organization/handle-organization.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx b/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
index ecd0b4fe9..29033f6b6 100644
--- a/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
@@ -185,7 +185,7 @@ export const ShowImport = ({ composeId }: Props) => {
 								</Button>
 							</div>
 							<Dialog open={showModal} onOpenChange={setShowModal}>
-								<DialogContent className="max-h-[80vh] max-w-[50vw]">
+								<DialogContent className="max-w-[50vw]">
 									<DialogHeader>
 										<DialogTitle className="text-2xl font-bold">
 											Template Information
diff --git a/apps/dokploy/components/dashboard/organization/handle-organization.tsx b/apps/dokploy/components/dashboard/organization/handle-organization.tsx
index 014c37df1..45dd0e9c7 100644
--- a/apps/dokploy/components/dashboard/organization/handle-organization.tsx
+++ b/apps/dokploy/components/dashboard/organization/handle-organization.tsx
@@ -169,7 +169,7 @@ export function AddOrganization({ organizationId }: Props) {
 								</FormItem>
 							)}
 						/>
-						<DialogFooter className="mt-4">
+						<DialogFooter>
 							<Button type="submit" isLoading={isLoading}>
 								{organizationId ? "Update organization" : "Create organization"}
 							</Button>

From 94829daf1579202797fd1088d74f97b81bf82339 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 13:35:26 -0300
Subject: [PATCH 13/16] fix(ui): code formatting and DialogHeader improvements

- Apply consistent code formatting across dialog components
- Add bottom padding to DialogHeader for better visual separation
- Clean up DialogHeader usage in swarm settings (remove duplicate padding)
- Improve schedule dialog layout and add proper description
- Fix indentation and formatting inconsistencies

Final cleanup of dialog component formatting and spacing.
---
 .../cluster/modify-swarm-settings.tsx         |   2 +-
 .../schedules/handle-schedules.tsx            | 144 +++++++++---------
 apps/dokploy/components/ui/dialog.tsx         |  73 +++++----
 3 files changed, 119 insertions(+), 100 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
index 1e120322d..b8a272e15 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
@@ -271,7 +271,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-5xl p-0">
-				<DialogHeader className="p-6">
+				<DialogHeader>
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
 						Update certain settings using a json object.
diff --git a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
index 24e71bc70..2d3e9f931 100644
--- a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
+	DialogDescription,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
@@ -232,14 +233,17 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 			</DialogTrigger>
 			<DialogContent
 				className={cn(
-					"overflow-y-auto",
 					scheduleTypeForm === "dokploy-server" || scheduleTypeForm === "server"
-						? "max-h-[95vh] sm:max-w-2xl"
-						: " sm:max-w-lg",
+					? "sm:max-w-2xl"
+					: "sm:max-w-lg",
 				)}
 			>
 				<DialogHeader>
 					<DialogTitle>{scheduleId ? "Edit" : "Create"} Schedule</DialogTitle>
+					<DialogDescription>
+						{scheduleId ? "Manage" : "Create"} a schedule to run a task at a
+						specific time or interval.
+					</DialogDescription>
 				</DialogHeader>
 				<Form {...form}>
 					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -434,82 +438,82 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 
 						{(scheduleTypeForm === "application" ||
 							scheduleTypeForm === "compose") && (
-							<>
-								<FormField
-									control={form.control}
-									name="shellType"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel className="flex items-center gap-2">
-												Shell Type
-											</FormLabel>
-											<Select
-												onValueChange={field.onChange}
-												defaultValue={field.value}
-											>
+								<>
+									<FormField
+										control={form.control}
+										name="shellType"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel className="flex items-center gap-2">
+													Shell Type
+												</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select shell type" />
+														</SelectTrigger>
+													</FormControl>
+													<SelectContent>
+														<SelectItem value="bash">Bash</SelectItem>
+														<SelectItem value="sh">Sh</SelectItem>
+													</SelectContent>
+												</Select>
+												<FormDescription>
+													Choose the shell to execute your command
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="command"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel className="flex items-center gap-2">
+													Command
+												</FormLabel>
 												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select shell type" />
-													</SelectTrigger>
+													<Input placeholder="npm run backup" {...field} />
 												</FormControl>
-												<SelectContent>
-													<SelectItem value="bash">Bash</SelectItem>
-													<SelectItem value="sh">Sh</SelectItem>
-												</SelectContent>
-											</Select>
-											<FormDescription>
-												Choose the shell to execute your command
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="command"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel className="flex items-center gap-2">
-												Command
-											</FormLabel>
-											<FormControl>
-												<Input placeholder="npm run backup" {...field} />
-											</FormControl>
-											<FormDescription>
-												The command to execute in your container
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							</>
-						)}
+												<FormDescription>
+													The command to execute in your container
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</>
+							)}
 
 						{(scheduleTypeForm === "dokploy-server" ||
 							scheduleTypeForm === "server") && (
-							<FormField
-								control={form.control}
-								name="script"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Script</FormLabel>
-										<FormControl>
+								<FormField
+									control={form.control}
+									name="script"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Script</FormLabel>
 											<FormControl>
-												<CodeEditor
-													language="shell"
-													placeholder={`# This is a comment
+												<FormControl>
+													<CodeEditor
+														language="shell"
+														placeholder={`# This is a comment
 echo "Hello, world!"
 `}
-													className="h-96 font-mono"
-													{...field}
-												/>
+														className="h-96 font-mono"
+														{...field}
+													/>
+												</FormControl>
 											</FormControl>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						)}
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
 
 						<FormField
 							control={form.control}
diff --git a/apps/dokploy/components/ui/dialog.tsx b/apps/dokploy/components/ui/dialog.tsx
index 52bbe9790..f3b6fedbd 100644
--- a/apps/dokploy/components/ui/dialog.tsx
+++ b/apps/dokploy/components/ui/dialog.tsx
@@ -1,16 +1,25 @@
+import { cn } from "@/lib/utils";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
-import { cn } from "@/lib/utils";
 
 const DialogContext = React.createContext<{
 	onOpenChange?: (open: boolean) => void;
 	open?: boolean;
 }>({});
 
-const Dialog = ({ onOpenChange, open, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) => (
+const Dialog = ({
+	onOpenChange,
+	open,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) => (
 	<DialogContext.Provider value={{ onOpenChange, open }}>
-		<DialogPrimitive.Root open={open} onOpenChange={onOpenChange} {...props} modal={false}/>
+		<DialogPrimitive.Root
+			open={open}
+			onOpenChange={onOpenChange}
+			{...props}
+			modal={false}
+		/>
 	</DialogContext.Provider>
 );
 Dialog.displayName = DialogPrimitive.Root.displayName;
@@ -44,18 +53,19 @@ const DialogContent = React.forwardRef<
 	const { onOpenChange, open } = React.useContext(DialogContext);
 
 	React.useEffect(() => {
-		if (!open) return; 
-		
-		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		if (!open) return;
+
+		const scrollbarWidth =
+			window.innerWidth - document.documentElement.clientWidth;
 		const body = document.body;
 		const originalPaddingRight = body.style.paddingRight;
 		const originalOverflow = body.style.overflow;
-		
-		body.style.overflow = 'hidden';
+
+		body.style.overflow = "hidden";
 		if (scrollbarWidth > 0) {
 			body.style.paddingRight = `${scrollbarWidth}px`;
 		}
-		
+
 		return () => {
 			body.style.overflow = originalOverflow;
 			body.style.paddingRight = originalPaddingRight;
@@ -63,23 +73,26 @@ const DialogContent = React.forwardRef<
 	}, [open]);
 
 	// Handle outside interactions properly with Command components
-	const handleInteractOutside = React.useCallback((e: Event) => {
-		if (onOpenChange) {
-			onOpenChange(false);
-		}
-	}, [onOpenChange]);
+	const handleInteractOutside = React.useCallback(
+		(_e: Event) => {
+			if (onOpenChange) {
+				onOpenChange(false);
+			}
+		},
+		[onOpenChange],
+	);
 
 	const hasPaddingOverride = className?.includes("p-0");
-	
+
 	// Separate DialogFooter from other children for proper layout
 	const childrenArray = React.Children.toArray(children);
-	const dialogFooter = childrenArray.find((child) => 
-		React.isValidElement(child) && child.type === DialogFooter
+	const dialogFooter = childrenArray.find(
+		(child) => React.isValidElement(child) && child.type === DialogFooter,
 	);
-	const otherChildren = childrenArray.filter((child) => 
-		!(React.isValidElement(child) && child.type === DialogFooter)
+	const otherChildren = childrenArray.filter(
+		(child) => !(React.isValidElement(child) && child.type === DialogFooter),
 	);
-	
+
 	return (
 		<DialogPortal>
 			{/* Custom overlay for modal=false - no click handler to avoid Command conflicts */}
@@ -94,9 +107,11 @@ const DialogContent = React.forwardRef<
 				onInteractOutside={(e) => {
 					const target = e.target as HTMLElement;
 					// Don't close when clicking inside popovers, dropdowns, or command components
-					if (target.closest('[data-radix-popper-content-wrapper]') || 
-					    target.closest('[cmdk-root]') ||
-					    target.closest('[data-radix-command-root]')) {
+					if (
+						target.closest("[data-radix-popper-content-wrapper]") ||
+						target.closest("[cmdk-root]") ||
+						target.closest("[data-radix-command-root]")
+					) {
 						e.preventDefault();
 						return;
 					}
@@ -105,23 +120,23 @@ const DialogContent = React.forwardRef<
 				}}
 				{...props}
 			>
-				<div 
+				<div
 					ref={contentRef}
 					className={cn(
 						"overflow-y-auto overflow-x-hidden flex-1 min-h-0 overscroll-contain",
-						!hasPaddingOverride && "p-6"
+						!hasPaddingOverride && "p-6",
 					)}
 				>
 					{otherChildren}
 				</div>
-				
+
 				{/* DialogFooter outside scrollable area with proper spacing */}
 				{dialogFooter && (
 					<div className="p-6 pt-0 border-t border-border/50">
 						{dialogFooter}
 					</div>
 				)}
-				
+
 				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 					<X className="h-4 w-4" />
 					<span className="sr-only">Close</span>
@@ -138,7 +153,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={cn(
-			"flex flex-col space-y-1.5 text-center sm:text-left",
+			"flex flex-col space-y-1.5 text-center sm:text-left pb-4",
 			className,
 		)}
 		{...props}
@@ -198,4 +213,4 @@ export {
 	DialogFooter,
 	DialogTitle,
 	DialogDescription,
-};
\ No newline at end of file
+};

From bddafe294dc68718fe48431305a6634f7ec6f4b1 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 13:47:27 -0300
Subject: [PATCH 14/16] fix(classname): removes leading blank space on
 classnames

---
 .../application/advanced/ports/handle-ports.tsx        |  2 +-
 .../application/advanced/security/handle-security.tsx  |  2 +-
 .../advanced/traefik/update-traefik-config.tsx         |  2 +-
 .../application/advanced/volumes/add-volumes.tsx       |  2 +-
 .../application/advanced/volumes/update-volume.tsx     |  2 +-
 .../dashboard/application/schedules/show-schedules.tsx |  2 +-
 .../application/volume-backups/show-volume-backups.tsx |  2 +-
 .../dashboard/docker/logs/show-docker-modal-logs.tsx   |  2 +-
 .../docker/logs/show-docker-modal-stack-logs.tsx       |  2 +-
 .../docker/terminal/docker-terminal-modal.tsx          |  2 +-
 .../paid/container/show-paid-container-monitoring.tsx  |  2 +-
 .../monitoring/paid/servers/show-paid-monitoring.tsx   |  2 +-
 .../dashboard/organization/handle-organization.tsx     |  2 +-
 .../components/dashboard/project/add-application.tsx   |  2 +-
 .../components/dashboard/project/add-compose.tsx       |  2 +-
 .../components/dashboard/project/ai/step-two.tsx       |  6 +++---
 apps/dokploy/components/dashboard/requests/columns.tsx |  4 ++--
 .../dashboard/settings/billing/show-billing.tsx        |  6 +++---
 .../settings/certificates/add-certificate.tsx          |  2 +-
 .../dashboard/settings/cluster/nodes/add-node.tsx      |  2 +-
 .../settings/destination/handle-destinations.tsx       |  2 +-
 .../settings/notifications/handle-notifications.tsx    | 10 +++++-----
 .../dashboard/settings/servers/setup-server.tsx        |  2 +-
 .../settings/servers/welcome-stripe/create-ssh-key.tsx |  2 +-
 .../servers/welcome-stripe/welcome-suscription.tsx     |  2 +-
 .../dashboard/settings/ssh-keys/handle-ssh-keys.tsx    |  2 +-
 .../dashboard/settings/users/add-invitation.tsx        |  2 +-
 .../dashboard/settings/users/add-permissions.tsx       |  2 +-
 .../dashboard/settings/web-server/edit-traefik-env.tsx |  2 +-
 .../settings/web-server/local-server-config.tsx        |  2 +-
 .../dashboard/settings/web-server/terminal-modal.tsx   |  2 +-
 apps/dokploy/components/ui/file-tree.tsx               |  2 +-
 apps/dokploy/pages/dashboard/project/[projectId].tsx   |  2 +-
 apps/dokploy/pages/register.tsx                        |  2 +-
 34 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx b/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
index eded628c9..beeed15dd 100644
--- a/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
@@ -124,7 +124,7 @@ export const HandlePorts = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-lg">
+			<DialogContent classname="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Ports</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx b/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
index e1cf20b78..d56545bb0 100644
--- a/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
@@ -114,7 +114,7 @@ export const HandleSecurity = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-lg">
+			<DialogContent classname="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
index 0dd0406b2..134ae67a6 100644
--- a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 			<DialogTrigger asChild>
 				<Button isLoading={isLoading}>Modify</Button>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-4xl">
+			<DialogContent classname="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update traefik config</DialogTitle>
 					<DialogDescription>Update the traefik config</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx b/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
index 8a5e1fec4..4f89db922 100644
--- a/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
@@ -151,7 +151,7 @@ export const AddVolumes = ({
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-3xl">
+			<DialogContent classname="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Volumes / Mounts</DialogTitle>
 				</DialogHeader>
diff --git a/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx b/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
index 1a9b63cad..e9b2ae36b 100644
--- a/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
@@ -186,7 +186,7 @@ export const UpdateVolume = ({
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-3xl">
+			<DialogContent classname="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Update</DialogTitle>
 					<DialogDescription>Update the mount</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
index ecef0deeb..aad1c53af 100644
--- a/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
@@ -91,7 +91,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 							return (
 								<div
 									key={schedule.scheduleId}
-									className=" flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									classname="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
diff --git a/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx b/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
index bb071947e..2b0417d71 100644
--- a/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
+++ b/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
@@ -113,7 +113,7 @@ export const ShowVolumeBackups = ({
 							return (
 								<div
 									key={volumeBackup.volumeBackupId}
-									className=" flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									classname="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
index 265005615..577804d5c 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
@@ -40,7 +40,7 @@ export const ShowDockerModalLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-7xl">
+			<DialogContent classname="sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
index 803ea9840..3edc1ca86 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
@@ -40,7 +40,7 @@ export const ShowDockerModalStackLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-7xl">
+			<DialogContent classname="sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
index ac93b84f1..a2b6331cf 100644
--- a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
@@ -60,7 +60,7 @@ export const DockerTerminalModal = ({
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				className=" sm:max-w-7xl"
+				classname="sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader>
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
index 3b189c2ac..bb5834d2b 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
@@ -123,7 +123,7 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
 							? queryError.message
 							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
 					</p>
-					<p className=" text-sm text-muted-foreground">URL: {baseUrl}</p>
+					<p classname="text-sm text-muted-foreground">URL: {baseUrl}</p>
 				</div>
 			</div>
 		);
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
index e92ce03fc..c6332e55b 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
@@ -143,7 +143,7 @@ export const ShowPaidMonitoring = ({
 							? queryError.message
 							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
 					</p>
-					<p className=" text-sm text-muted-foreground">URL: {BASE_URL}</p>
+					<p classname="text-sm text-muted-foreground">URL: {BASE_URL}</p>
 				</div>
 			</div>
 		);
diff --git a/apps/dokploy/components/dashboard/organization/handle-organization.tsx b/apps/dokploy/components/dashboard/organization/handle-organization.tsx
index 45dd0e9c7..5e63f6c0d 100644
--- a/apps/dokploy/components/dashboard/organization/handle-organization.tsx
+++ b/apps/dokploy/components/dashboard/organization/handle-organization.tsx
@@ -155,7 +155,7 @@ export function AddOrganization({ organizationId }: Props) {
 							control={form.control}
 							name="logo"
 							render={({ field }) => (
-								<FormItem className=" gap-4">
+								<FormItem classname="gap-4">
 									<FormLabel className="text-right">Logo URL</FormLabel>
 									<FormControl>
 										<Input
diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx
index 3150d8046..6f5f08e2c 100644
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -119,7 +119,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 					<span>Application</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-lg">
+			<DialogContent classname="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Create</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/project/add-compose.tsx b/apps/dokploy/components/dashboard/project/add-compose.tsx
index 1db73a80b..da0a7e80b 100644
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -124,7 +124,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 					<span>Compose</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-xl">
+			<DialogContent classname="sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>Create Compose</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/project/ai/step-two.tsx b/apps/dokploy/components/dashboard/project/ai/step-two.tsx
index 14a929fce..fc918afc7 100644
--- a/apps/dokploy/components/dashboard/project/ai/step-two.tsx
+++ b/apps/dokploy/components/dashboard/project/ai/step-two.tsx
@@ -259,7 +259,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="description">
 										<AccordionTrigger>Description</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea className=" w-full rounded-md border p-4">
+											<ScrollArea classname="w-full rounded-md border p-4">
 												<ReactMarkdown className="text-muted-foreground text-sm">
 													{selectedVariant?.description}
 												</ReactMarkdown>
@@ -289,7 +289,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="env-variables">
 										<AccordionTrigger>Environment Variables</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea className=" w-full rounded-md border">
+											<ScrollArea classname="w-full rounded-md border">
 												<div className="p-4 space-y-4">
 													{selectedVariant?.envVariables.map((env, index) => (
 														<div
@@ -364,7 +364,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="domains">
 										<AccordionTrigger>Domains</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea className=" w-full rounded-md border">
+											<ScrollArea classname="w-full rounded-md border">
 												<div className="p-4 space-y-4">
 													{selectedVariant?.domains.map((domain, index) => (
 														<div
diff --git a/apps/dokploy/components/dashboard/requests/columns.tsx b/apps/dokploy/components/dashboard/requests/columns.tsx
index 2c0391f80..c32913137 100644
--- a/apps/dokploy/components/dashboard/requests/columns.tsx
+++ b/apps/dokploy/components/dashboard/requests/columns.tsx
@@ -47,7 +47,7 @@ export const columns: ColumnDef<LogEntry>[] = [
 		cell: ({ row }) => {
 			const log = row.original;
 			return (
-				<div className=" flex flex-col gap-2">
+				<div classname="flex flex-col gap-2">
 					<div className="flex items-center flex-row gap-3 ">
 						{log.RequestMethod}{" "}
 						<div className="inline-flex items-center gap-2 bg-muted px-1.5 py-1 rounded-lg">
@@ -86,7 +86,7 @@ export const columns: ColumnDef<LogEntry>[] = [
 		cell: ({ row }) => {
 			const log = row.original;
 			return (
-				<div className=" flex flex-col gap-2">
+				<div classname="flex flex-col gap-2">
 					<div className="flex flex-row gap-3 w-full">
 						{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
 					</div>
diff --git a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
index 2c20bb81d..feb9db6a6 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
@@ -171,7 +171,7 @@ export const ShowBilling = () => {
 													)}
 													{isAnnual ? (
 														<div className="flex flex-row gap-2 items-center">
-															<p className=" text-2xl font-semibold tracking-tight text-primary ">
+															<p classname="text-2xl font-semibold tracking-tight text-primary ">
 																${" "}
 																{calculatePrice(
 																	serverQuantity,
@@ -180,7 +180,7 @@ export const ShowBilling = () => {
 																USD
 															</p>
 															|
-															<p className=" text-base font-semibold tracking-tight text-muted-foreground">
+															<p classname="text-base font-semibold tracking-tight text-muted-foreground">
 																${" "}
 																{(
 																	calculatePrice(serverQuantity, isAnnual) / 12
@@ -189,7 +189,7 @@ export const ShowBilling = () => {
 															</p>
 														</div>
 													) : (
-														<p className=" text-2xl font-semibold tracking-tight text-primary ">
+														<p classname="text-2xl font-semibold tracking-tight text-primary ">
 															${" "}
 															{calculatePrice(serverQuantity, isAnnual).toFixed(
 																2,
diff --git a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
index b7f7749c1..9b6f22402 100644
--- a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
@@ -106,7 +106,7 @@ export const AddCertificate = () => {
 					Add Certificate
 				</Button>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-2xl">
+			<DialogContent classname="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add New Certificate</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx b/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
index 07389e0cc..c6193264e 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
@@ -27,7 +27,7 @@ export const AddNode = ({ serverId }: Props) => {
 					Add Node
 				</Button>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-4xl">
+			<DialogContent classname="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Add Node</DialogTitle>
 					<DialogDescription className="flex flex-col gap-2">
diff --git a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
index a23912f08..04da10ea0 100644
--- a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
+++ b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
@@ -204,7 +204,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-2xl">
+			<DialogContent classname="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>
 						{destinationId ? "Update" : "Add"} Destination
diff --git a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
index 18fe7f391..2fa68b1cb 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
@@ -907,7 +907,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="appBuildError"
 									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>App Build Error</FormLabel>
 												<FormDescription>
@@ -928,7 +928,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="databaseBackup"
 									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Database Backup</FormLabel>
 												<FormDescription>
@@ -949,7 +949,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="dockerCleanup"
 									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Docker Cleanup</FormLabel>
 												<FormDescription>
@@ -972,7 +972,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										control={form.control}
 										name="dokployRestart"
 										render={({ field }) => (
-											<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+											<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Dokploy Restart</FormLabel>
 													<FormDescription>
@@ -995,7 +995,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										control={form.control}
 										name="serverThreshold"
 										render={({ field }) => (
-											<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+											<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Server Threshold</FormLabel>
 													<FormDescription>
diff --git a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
index b2c87c39f..7e0b07a5d 100644
--- a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -152,7 +152,7 @@ export const SetupServer = ({ serverId }: Props) => {
 												Copy Public Key ({server?.sshKey?.name})
 												<button
 													type="button"
-													className=" right-2 top-8"
+													classname="right-2 top-8"
 													onClick={() => {
 														copy(
 															server?.sshKey?.publicKey || "Generate a SSH Key",
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
index 22c9f4ebf..2e7db398f 100644
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
@@ -122,7 +122,7 @@ export const CreateSSHKey = () => {
 												Copy Public Key
 												<button
 													type="button"
-													className=" right-2 top-8"
+													classname="right-2 top-8"
 													onClick={() => {
 														copy(
 															cloudSSHKey?.publicKey || "Generate a SSH Key",
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
index 3b8f23514..f0aeea500 100644
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
@@ -289,7 +289,7 @@ export const WelcomeSuscription = () => {
 									<div className="flex flex-col gap-6">
 										<div className="flex flex-col gap-2">
 											<h2 className="text-lg font-semibold">You're All Set!</h2>
-											<p className=" text-muted-foreground">
+											<p classname="text-muted-foreground">
 												Did you know you can deploy any number of applications
 												that your server can handle?
 											</p>
diff --git a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
index 5d85f28bd..9f0529934 100644
--- a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
+++ b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
@@ -152,7 +152,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-2xl">
+			<DialogContent classname="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>SSH Key</DialogTitle>
 					<DialogDescription className="space-y-4">
diff --git a/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx b/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
index 1542a778f..f62a1e10a 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
@@ -108,7 +108,7 @@ export const AddInvitation = () => {
 					<PlusIcon className="h-4 w-4" /> Add Invitation
 				</Button>
 			</DialogTrigger>
-			<DialogContent className=" sm:max-w-2xl">
+			<DialogContent classname="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add Invitation</DialogTitle>
 					<DialogDescription>Invite a new user</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
index 8f527ec0b..ac848065e 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
@@ -140,7 +140,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 							control={form.control}
 							name="canCreateProjects"
 							render={({ field }) => (
-								<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+								<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
 									<div className="space-y-0.5">
 										<FormLabel>Create Projects</FormLabel>
 										<FormDescription>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx b/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
index 8262b9cbc..f816de46c 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
@@ -78,7 +78,7 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent className=" sm:max-w-4xl">
+			<DialogContent classname="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update Traefik Environment</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx b/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx
index e30408e6d..9f7ba01c2 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx
@@ -77,7 +77,7 @@ const LocalServerConfig = ({ onSave }: Props) => {
 					<div className="flex flex-row items-center gap-2 justify-between w-full">
 						<div className="flex flex-row gap-2 items-center">
 							<Settings className="h-4 w-4" />
-							<span className=" dark:hover:text-white">
+							<span classname="dark:hover:text-white">
 								{t("settings.terminal.connectionSettings")}
 							</span>
 						</div>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
index 2de0074c1..b5872acc1 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
@@ -53,7 +53,7 @@ export const TerminalModal = ({ children, serverId }: Props) => {
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				className=" sm:max-w-7xl"
+				classname="sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader className="flex flex-col gap-1">
diff --git a/apps/dokploy/components/ui/file-tree.tsx b/apps/dokploy/components/ui/file-tree.tsx
index 60c764a92..98916b6b0 100644
--- a/apps/dokploy/components/ui/file-tree.tsx
+++ b/apps/dokploy/components/ui/file-tree.tsx
@@ -246,7 +246,7 @@ const Leaf = React.forwardRef<
 					aria-hidden="true"
 				/>
 			)}
-			<p className=" text-sm whitespace-normal font-mono text-left">
+			<p classname="text-sm whitespace-normal font-mono text-left">
 				{item.name}
 			</p>
 		</button>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId].tsx b/apps/dokploy/pages/dashboard/project/[projectId].tsx
index e189ed5cc..4dab1c519 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId].tsx
@@ -958,7 +958,7 @@ const Project = (
 											</div>
 										) : (
 											<div className="flex w-full flex-col gap-4">
-												<div className=" gap-5 pb-10  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+												<div classname="gap-5 pb-10  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
 													{filteredServices?.map((service) => (
 														<Card
 															key={service.id}
diff --git a/apps/dokploy/pages/register.tsx b/apps/dokploy/pages/register.tsx
index 393c2ba24..7af2d0714 100644
--- a/apps/dokploy/pages/register.tsx
+++ b/apps/dokploy/pages/register.tsx
@@ -131,7 +131,7 @@ const Register = ({ isCloud }: Props) => {
 					</CardDescription>
 					<div className="mx-auto w-full max-w-lg bg-transparent">
 						{isError && (
-							<div className=" my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+							<div classname="my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
 								<AlertTriangle className="text-red-600 dark:text-red-400" />
 								<span className="text-sm text-red-600 dark:text-red-400">
 									{error}

From 89f71fe8891bc3f6fc1fd3d50e8be326fb5cbde6 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 13 Jul 2025 16:50:41 +0000
Subject: [PATCH 15/16] [autofix.ci] apply automated fixes

---
 .../schedules/handle-schedules.tsx            | 136 +++++++++---------
 1 file changed, 68 insertions(+), 68 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
index 2d3e9f931..077c289b8 100644
--- a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
@@ -234,8 +234,8 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 			<DialogContent
 				className={cn(
 					scheduleTypeForm === "dokploy-server" || scheduleTypeForm === "server"
-					? "sm:max-w-2xl"
-					: "sm:max-w-lg",
+						? "sm:max-w-2xl"
+						: "sm:max-w-lg",
 				)}
 			>
 				<DialogHeader>
@@ -438,82 +438,82 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 
 						{(scheduleTypeForm === "application" ||
 							scheduleTypeForm === "compose") && (
-								<>
-									<FormField
-										control={form.control}
-										name="shellType"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel className="flex items-center gap-2">
-													Shell Type
-												</FormLabel>
-												<Select
-													onValueChange={field.onChange}
-													defaultValue={field.value}
-												>
-													<FormControl>
-														<SelectTrigger>
-															<SelectValue placeholder="Select shell type" />
-														</SelectTrigger>
-													</FormControl>
-													<SelectContent>
-														<SelectItem value="bash">Bash</SelectItem>
-														<SelectItem value="sh">Sh</SelectItem>
-													</SelectContent>
-												</Select>
-												<FormDescription>
-													Choose the shell to execute your command
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-									<FormField
-										control={form.control}
-										name="command"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel className="flex items-center gap-2">
-													Command
-												</FormLabel>
-												<FormControl>
-													<Input placeholder="npm run backup" {...field} />
-												</FormControl>
-												<FormDescription>
-													The command to execute in your container
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								</>
-							)}
-
-						{(scheduleTypeForm === "dokploy-server" ||
-							scheduleTypeForm === "server") && (
+							<>
 								<FormField
 									control={form.control}
-									name="script"
+									name="shellType"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Script</FormLabel>
-											<FormControl>
+											<FormLabel className="flex items-center gap-2">
+												Shell Type
+											</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
 												<FormControl>
-													<CodeEditor
-														language="shell"
-														placeholder={`# This is a comment
-echo "Hello, world!"
-`}
-														className="h-96 font-mono"
-														{...field}
-													/>
+													<SelectTrigger>
+														<SelectValue placeholder="Select shell type" />
+													</SelectTrigger>
 												</FormControl>
-											</FormControl>
+												<SelectContent>
+													<SelectItem value="bash">Bash</SelectItem>
+													<SelectItem value="sh">Sh</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormDescription>
+												Choose the shell to execute your command
+											</FormDescription>
 											<FormMessage />
 										</FormItem>
 									)}
 								/>
-							)}
+								<FormField
+									control={form.control}
+									name="command"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel className="flex items-center gap-2">
+												Command
+											</FormLabel>
+											<FormControl>
+												<Input placeholder="npm run backup" {...field} />
+											</FormControl>
+											<FormDescription>
+												The command to execute in your container
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
+
+						{(scheduleTypeForm === "dokploy-server" ||
+							scheduleTypeForm === "server") && (
+							<FormField
+								control={form.control}
+								name="script"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Script</FormLabel>
+										<FormControl>
+											<FormControl>
+												<CodeEditor
+													language="shell"
+													placeholder={`# This is a comment
+echo "Hello, world!"
+`}
+													className="h-96 font-mono"
+													{...field}
+												/>
+											</FormControl>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 
 						<FormField
 							control={form.control}

From 79c29fa92d008a8062931ead3ec2955b477d6599 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 13:58:25 -0300
Subject: [PATCH 16/16] fix(typo): fixed typo on replace classname

---
 .../application/advanced/ports/handle-ports.tsx        |  2 +-
 .../application/advanced/security/handle-security.tsx  |  2 +-
 .../advanced/traefik/update-traefik-config.tsx         |  2 +-
 .../application/advanced/volumes/add-volumes.tsx       |  2 +-
 .../application/advanced/volumes/update-volume.tsx     |  2 +-
 .../dashboard/application/schedules/show-schedules.tsx |  2 +-
 .../application/volume-backups/show-volume-backups.tsx |  2 +-
 .../dashboard/docker/logs/show-docker-modal-logs.tsx   |  2 +-
 .../docker/logs/show-docker-modal-stack-logs.tsx       |  2 +-
 .../docker/terminal/docker-terminal-modal.tsx          |  2 +-
 .../paid/container/show-paid-container-monitoring.tsx  |  2 +-
 .../monitoring/paid/servers/show-paid-monitoring.tsx   |  2 +-
 .../dashboard/organization/handle-organization.tsx     |  2 +-
 .../components/dashboard/project/add-application.tsx   |  2 +-
 .../components/dashboard/project/add-compose.tsx       |  2 +-
 .../components/dashboard/project/ai/step-two.tsx       |  6 +++---
 apps/dokploy/components/dashboard/requests/columns.tsx |  4 ++--
 .../dashboard/settings/billing/show-billing.tsx        |  6 +++---
 .../settings/certificates/add-certificate.tsx          |  2 +-
 .../dashboard/settings/cluster/nodes/add-node.tsx      |  2 +-
 .../settings/destination/handle-destinations.tsx       |  2 +-
 .../settings/notifications/handle-notifications.tsx    | 10 +++++-----
 .../dashboard/settings/servers/setup-server.tsx        |  2 +-
 .../settings/servers/welcome-stripe/create-ssh-key.tsx |  2 +-
 .../servers/welcome-stripe/welcome-suscription.tsx     |  2 +-
 .../dashboard/settings/ssh-keys/handle-ssh-keys.tsx    |  2 +-
 .../dashboard/settings/users/add-invitation.tsx        |  2 +-
 .../dashboard/settings/users/add-permissions.tsx       |  2 +-
 .../dashboard/settings/web-server/edit-traefik-env.tsx |  2 +-
 .../settings/web-server/local-server-config.tsx        |  2 +-
 .../dashboard/settings/web-server/terminal-modal.tsx   |  2 +-
 apps/dokploy/components/ui/file-tree.tsx               |  2 +-
 apps/dokploy/pages/dashboard/project/[projectId].tsx   |  2 +-
 apps/dokploy/pages/register.tsx                        |  2 +-
 34 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx b/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
index beeed15dd..81c1f32c5 100644
--- a/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx
@@ -124,7 +124,7 @@ export const HandlePorts = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Ports</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx b/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
index d56545bb0..1808f7873 100644
--- a/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx
@@ -114,7 +114,7 @@ export const HandleSecurity = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
index 134ae67a6..c73ed5b3d 100644
--- a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 			<DialogTrigger asChild>
 				<Button isLoading={isLoading}>Modify</Button>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-4xl">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update traefik config</DialogTitle>
 					<DialogDescription>Update the traefik config</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx b/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
index 4f89db922..84c864e3a 100644
--- a/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
@@ -151,7 +151,7 @@ export const AddVolumes = ({
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Volumes / Mounts</DialogTitle>
 				</DialogHeader>
diff --git a/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx b/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
index e9b2ae36b..2a692f100 100644
--- a/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx
@@ -186,7 +186,7 @@ export const UpdateVolume = ({
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Update</DialogTitle>
 					<DialogDescription>Update the mount</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
index aad1c53af..2f2ebc85a 100644
--- a/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
@@ -91,7 +91,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 							return (
 								<div
 									key={schedule.scheduleId}
-									classname="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
diff --git a/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx b/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
index 2b0417d71..083f45252 100644
--- a/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
+++ b/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
@@ -113,7 +113,7 @@ export const ShowVolumeBackups = ({
 							return (
 								<div
 									key={volumeBackup.volumeBackupId}
-									classname="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
index 577804d5c..fc2fb8f67 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
@@ -40,7 +40,7 @@ export const ShowDockerModalLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-7xl">
+			<DialogContent className="sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
index 3edc1ca86..669369348 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx
@@ -40,7 +40,7 @@ export const ShowDockerModalStackLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-7xl">
+			<DialogContent className="sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
index a2b6331cf..97d9f16e8 100644
--- a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
@@ -60,7 +60,7 @@ export const DockerTerminalModal = ({
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				classname="sm:max-w-7xl"
+				className="sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader>
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
index bb5834d2b..c9cefa4c3 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
@@ -123,7 +123,7 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
 							? queryError.message
 							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
 					</p>
-					<p classname="text-sm text-muted-foreground">URL: {baseUrl}</p>
+					<p className="text-sm text-muted-foreground">URL: {baseUrl}</p>
 				</div>
 			</div>
 		);
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
index c6332e55b..492abc9e0 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
@@ -143,7 +143,7 @@ export const ShowPaidMonitoring = ({
 							? queryError.message
 							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
 					</p>
-					<p classname="text-sm text-muted-foreground">URL: {BASE_URL}</p>
+					<p className="text-sm text-muted-foreground">URL: {BASE_URL}</p>
 				</div>
 			</div>
 		);
diff --git a/apps/dokploy/components/dashboard/organization/handle-organization.tsx b/apps/dokploy/components/dashboard/organization/handle-organization.tsx
index 5e63f6c0d..394f3d018 100644
--- a/apps/dokploy/components/dashboard/organization/handle-organization.tsx
+++ b/apps/dokploy/components/dashboard/organization/handle-organization.tsx
@@ -155,7 +155,7 @@ export function AddOrganization({ organizationId }: Props) {
 							control={form.control}
 							name="logo"
 							render={({ field }) => (
-								<FormItem classname="gap-4">
+								<FormItem className="gap-4">
 									<FormLabel className="text-right">Logo URL</FormLabel>
 									<FormControl>
 										<Input
diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx
index 6f5f08e2c..9ed31464a 100644
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -119,7 +119,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 					<span>Application</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Create</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/project/add-compose.tsx b/apps/dokploy/components/dashboard/project/add-compose.tsx
index da0a7e80b..a60bfdd70 100644
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -124,7 +124,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 					<span>Compose</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-xl">
+			<DialogContent className="sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>Create Compose</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/project/ai/step-two.tsx b/apps/dokploy/components/dashboard/project/ai/step-two.tsx
index fc918afc7..7b4deb30e 100644
--- a/apps/dokploy/components/dashboard/project/ai/step-two.tsx
+++ b/apps/dokploy/components/dashboard/project/ai/step-two.tsx
@@ -259,7 +259,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="description">
 										<AccordionTrigger>Description</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea classname="w-full rounded-md border p-4">
+											<ScrollArea className="w-full rounded-md border p-4">
 												<ReactMarkdown className="text-muted-foreground text-sm">
 													{selectedVariant?.description}
 												</ReactMarkdown>
@@ -289,7 +289,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="env-variables">
 										<AccordionTrigger>Environment Variables</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea classname="w-full rounded-md border">
+											<ScrollArea className="w-full rounded-md border">
 												<div className="p-4 space-y-4">
 													{selectedVariant?.envVariables.map((env, index) => (
 														<div
@@ -364,7 +364,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="domains">
 										<AccordionTrigger>Domains</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea classname="w-full rounded-md border">
+											<ScrollArea className="w-full rounded-md border">
 												<div className="p-4 space-y-4">
 													{selectedVariant?.domains.map((domain, index) => (
 														<div
diff --git a/apps/dokploy/components/dashboard/requests/columns.tsx b/apps/dokploy/components/dashboard/requests/columns.tsx
index c32913137..7bedb42e2 100644
--- a/apps/dokploy/components/dashboard/requests/columns.tsx
+++ b/apps/dokploy/components/dashboard/requests/columns.tsx
@@ -47,7 +47,7 @@ export const columns: ColumnDef<LogEntry>[] = [
 		cell: ({ row }) => {
 			const log = row.original;
 			return (
-				<div classname="flex flex-col gap-2">
+				<div className="flex flex-col gap-2">
 					<div className="flex items-center flex-row gap-3 ">
 						{log.RequestMethod}{" "}
 						<div className="inline-flex items-center gap-2 bg-muted px-1.5 py-1 rounded-lg">
@@ -86,7 +86,7 @@ export const columns: ColumnDef<LogEntry>[] = [
 		cell: ({ row }) => {
 			const log = row.original;
 			return (
-				<div classname="flex flex-col gap-2">
+				<div className="flex flex-col gap-2">
 					<div className="flex flex-row gap-3 w-full">
 						{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
 					</div>
diff --git a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
index feb9db6a6..1e0e5d3df 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
@@ -171,7 +171,7 @@ export const ShowBilling = () => {
 													)}
 													{isAnnual ? (
 														<div className="flex flex-row gap-2 items-center">
-															<p classname="text-2xl font-semibold tracking-tight text-primary ">
+															<p className="text-2xl font-semibold tracking-tight text-primary ">
 																${" "}
 																{calculatePrice(
 																	serverQuantity,
@@ -180,7 +180,7 @@ export const ShowBilling = () => {
 																USD
 															</p>
 															|
-															<p classname="text-base font-semibold tracking-tight text-muted-foreground">
+															<p className="text-base font-semibold tracking-tight text-muted-foreground">
 																${" "}
 																{(
 																	calculatePrice(serverQuantity, isAnnual) / 12
@@ -189,7 +189,7 @@ export const ShowBilling = () => {
 															</p>
 														</div>
 													) : (
-														<p classname="text-2xl font-semibold tracking-tight text-primary ">
+														<p className="text-2xl font-semibold tracking-tight text-primary ">
 															${" "}
 															{calculatePrice(serverQuantity, isAnnual).toFixed(
 																2,
diff --git a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
index 9b6f22402..c0d059992 100644
--- a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
@@ -106,7 +106,7 @@ export const AddCertificate = () => {
 					Add Certificate
 				</Button>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add New Certificate</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx b/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
index c6193264e..1f594c508 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx
@@ -27,7 +27,7 @@ export const AddNode = ({ serverId }: Props) => {
 					Add Node
 				</Button>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-4xl">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Add Node</DialogTitle>
 					<DialogDescription className="flex flex-col gap-2">
diff --git a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
index 04da10ea0..40bcfa24e 100644
--- a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
+++ b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
@@ -204,7 +204,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>
 						{destinationId ? "Update" : "Add"} Destination
diff --git a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
index 2fa68b1cb..fbe6faeed 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx
@@ -907,7 +907,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="appBuildError"
 									render={({ field }) => (
-										<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>App Build Error</FormLabel>
 												<FormDescription>
@@ -928,7 +928,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="databaseBackup"
 									render={({ field }) => (
-										<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Database Backup</FormLabel>
 												<FormDescription>
@@ -949,7 +949,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="dockerCleanup"
 									render={({ field }) => (
-										<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Docker Cleanup</FormLabel>
 												<FormDescription>
@@ -972,7 +972,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										control={form.control}
 										name="dokployRestart"
 										render={({ field }) => (
-											<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Dokploy Restart</FormLabel>
 													<FormDescription>
@@ -995,7 +995,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										control={form.control}
 										name="serverThreshold"
 										render={({ field }) => (
-											<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Server Threshold</FormLabel>
 													<FormDescription>
diff --git a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
index 7e0b07a5d..85c63adb6 100644
--- a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -152,7 +152,7 @@ export const SetupServer = ({ serverId }: Props) => {
 												Copy Public Key ({server?.sshKey?.name})
 												<button
 													type="button"
-													classname="right-2 top-8"
+													className="right-2 top-8"
 													onClick={() => {
 														copy(
 															server?.sshKey?.publicKey || "Generate a SSH Key",
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
index 2e7db398f..a0f9db3ed 100644
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
@@ -122,7 +122,7 @@ export const CreateSSHKey = () => {
 												Copy Public Key
 												<button
 													type="button"
-													classname="right-2 top-8"
+													className="right-2 top-8"
 													onClick={() => {
 														copy(
 															cloudSSHKey?.publicKey || "Generate a SSH Key",
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
index f0aeea500..434ebe5a0 100644
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
@@ -289,7 +289,7 @@ export const WelcomeSuscription = () => {
 									<div className="flex flex-col gap-6">
 										<div className="flex flex-col gap-2">
 											<h2 className="text-lg font-semibold">You're All Set!</h2>
-											<p classname="text-muted-foreground">
+											<p className="text-muted-foreground">
 												Did you know you can deploy any number of applications
 												that your server can handle?
 											</p>
diff --git a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
index 9f0529934..1daab10bc 100644
--- a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
+++ b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
@@ -152,7 +152,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>SSH Key</DialogTitle>
 					<DialogDescription className="space-y-4">
diff --git a/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx b/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
index f62a1e10a..c09d11784 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-invitation.tsx
@@ -108,7 +108,7 @@ export const AddInvitation = () => {
 					<PlusIcon className="h-4 w-4" /> Add Invitation
 				</Button>
 			</DialogTrigger>
-			<DialogContent classname="sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add Invitation</DialogTitle>
 					<DialogDescription>Invite a new user</DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
index ac848065e..b3476392c 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
@@ -140,7 +140,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 							control={form.control}
 							name="canCreateProjects"
 							render={({ field }) => (
-								<FormItem classname="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
 									<div className="space-y-0.5">
 										<FormLabel>Create Projects</FormLabel>
 										<FormDescription>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx b/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
index f816de46c..5332fbf78 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
@@ -78,7 +78,7 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent classname="sm:max-w-4xl">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update Traefik Environment</DialogTitle>
 					<DialogDescription>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx b/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx
index 9f7ba01c2..ae9158453 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx
@@ -77,7 +77,7 @@ const LocalServerConfig = ({ onSave }: Props) => {
 					<div className="flex flex-row items-center gap-2 justify-between w-full">
 						<div className="flex flex-row gap-2 items-center">
 							<Settings className="h-4 w-4" />
-							<span classname="dark:hover:text-white">
+							<span className="dark:hover:text-white">
 								{t("settings.terminal.connectionSettings")}
 							</span>
 						</div>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
index b5872acc1..af5ce06c1 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
@@ -53,7 +53,7 @@ export const TerminalModal = ({ children, serverId }: Props) => {
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				classname="sm:max-w-7xl"
+				className="sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader className="flex flex-col gap-1">
diff --git a/apps/dokploy/components/ui/file-tree.tsx b/apps/dokploy/components/ui/file-tree.tsx
index 98916b6b0..644aa88fb 100644
--- a/apps/dokploy/components/ui/file-tree.tsx
+++ b/apps/dokploy/components/ui/file-tree.tsx
@@ -246,7 +246,7 @@ const Leaf = React.forwardRef<
 					aria-hidden="true"
 				/>
 			)}
-			<p classname="text-sm whitespace-normal font-mono text-left">
+			<p className="text-sm whitespace-normal font-mono text-left">
 				{item.name}
 			</p>
 		</button>
diff --git a/apps/dokploy/pages/dashboard/project/[projectId].tsx b/apps/dokploy/pages/dashboard/project/[projectId].tsx
index 4dab1c519..4da44e802 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId].tsx
@@ -958,7 +958,7 @@ const Project = (
 											</div>
 										) : (
 											<div className="flex w-full flex-col gap-4">
-												<div classname="gap-5 pb-10  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+												<div className="gap-5 pb-10  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
 													{filteredServices?.map((service) => (
 														<Card
 															key={service.id}
diff --git a/apps/dokploy/pages/register.tsx b/apps/dokploy/pages/register.tsx
index 7af2d0714..e156e4102 100644
--- a/apps/dokploy/pages/register.tsx
+++ b/apps/dokploy/pages/register.tsx
@@ -131,7 +131,7 @@ const Register = ({ isCloud }: Props) => {
 					</CardDescription>
 					<div className="mx-auto w-full max-w-lg bg-transparent">
 						{isError && (
-							<div classname="my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+							<div className="my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
 								<AlertTriangle className="text-red-600 dark:text-red-400" />
 								<span className="text-sm text-red-600 dark:text-red-400">
 									{error}