From e22489926b7eb6555f5e8a7573906a7eda463f61 Mon Sep 17 00:00:00 2001
From: Lucas Manchine <lucasperinm@gmail.com>
Date: Wed, 23 Jul 2025 21:18:57 +0000
Subject: [PATCH] feat: Add stop_grace_period to swarm settings, test layout

---
 .../cluster/modify-swarm-settings.tsx         | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 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 2342d7558..e16c85f2c 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
@@ -762,12 +762,36 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							render={({ field }) => (
 								<FormItem className="relative max-lg:px-4 lg:pr-6 ">
 									<FormLabel>Stop Grace Period</FormLabel>
-									<FormDescription>
-										Time to wait for the container to stop gracefully.
-									</FormDescription>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the format
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`Duration string format:
+• "30s" - 30 seconds
+• "2m" - 2 minutes  
+• "1h" - 1 hour
+• "0" - no grace period`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
 									<FormControl>
-										<Input
-											placeholder="e.g, 30s"
+										<CodeEditor
+											language="properties"
+											placeholder="30s"
+											className="h-[8rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>