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] 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
+};