From ae95485b74f56c98283ed8e1d7ab6da8e6f15575 Mon Sep 17 00:00:00 2001
From: Yash Kumar <hello@yash.run>
Date: Thu, 9 Jul 2026 16:59:25 +0530
Subject: [PATCH 1/3] fix(ui): structurally resolve unclickable watch path
 badges

---
 .../general/generic/save-bitbucket-provider.tsx          | 9 ++++++---
 .../application/general/generic/save-git-provider.tsx    | 9 ++++++---
 .../application/general/generic/save-gitea-provider.tsx  | 9 ++++++---
 .../application/general/generic/save-github-provider.tsx | 9 ++++++---
 .../application/general/generic/save-gitlab-provider.tsx | 9 ++++++---
 .../general/generic/save-bitbucket-provider-compose.tsx  | 9 ++++++---
 .../general/generic/save-git-provider-compose.tsx        | 9 ++++++---
 .../general/generic/save-gitea-provider-compose.tsx      | 9 ++++++---
 .../general/generic/save-github-provider-compose.tsx     | 9 ++++++---
 .../general/generic/save-gitlab-provider-compose.tsx     | 9 ++++++---
 10 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
index 2b0ae3f620..d5c608d702 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
@@ -438,14 +438,17 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="size-3" />
+												</button>
 											</Badge>
 										))}
 									</div>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
index 3fd0592890..62f1542d46 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
@@ -242,14 +242,17 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 									{field.value?.map((path, index) => (
 										<Badge key={index} variant="secondary">
 											{path}
-											<X
-												className="ml-1 size-3 cursor-pointer"
+											<button
+												type="button"
+												className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
 													form.setValue("watchPaths", newPaths);
 												}}
-											/>
+											>
+												<X className="size-3" />
+											</button>
 										</Badge>
 									))}
 								</div>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
index 30ca8bd805..a01c5c9a33 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
@@ -466,14 +466,17 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												className="flex items-center gap-1"
 											>
 												{path}
-												<X
-													className="size-3 cursor-pointer hover:text-destructive"
+												<button
+													type="button"
+													className="cursor-pointer hover:text-destructive focus:outline-none"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														field.onChange(newPaths);
 													}}
-												/>
+												>
+													<X className="size-3" />
+												</button>
 											</Badge>
 										))}
 									</div>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
index fa769ea459..4530c02df1 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
@@ -478,14 +478,17 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													className="flex items-center gap-1"
 												>
 													{path}
-													<X
-														className="size-3 cursor-pointer hover:text-destructive"
+													<button
+														type="button"
+														className="cursor-pointer hover:text-destructive focus:outline-none"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
 															field.onChange(newPaths);
 														}}
-													/>
+													>
+														<X className="size-3" />
+													</button>
 												</Badge>
 											))}
 										</div>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
index 6a63611fc1..12ff2d6177 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
@@ -459,14 +459,17 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												className="flex items-center gap-1"
 											>
 												{path}
-												<X
-													className="size-3 cursor-pointer hover:text-destructive"
+												<button
+													type="button"
+													className="cursor-pointer hover:text-destructive focus:outline-none"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														field.onChange(newPaths);
 													}}
-												/>
+												>
+													<X className="size-3" />
+												</button>
 											</Badge>
 										))}
 									</div>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
index ed8bd0a36c..d19eff59a3 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
@@ -442,14 +442,17 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="size-3" />
+												</button>
 											</Badge>
 										))}
 									</div>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
index 1c0c67ef26..d431b64ae2 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
@@ -251,14 +251,17 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 									{field.value?.map((path, index) => (
 										<Badge key={index} variant="secondary">
 											{path}
-											<X
-												className="ml-1 size-3 cursor-pointer"
+											<button
+												type="button"
+												className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
 													form.setValue("watchPaths", newPaths);
 												}}
-											/>
+											>
+												<X className="size-3" />
+											</button>
 										</Badge>
 									))}
 								</div>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
index cf2742d044..303b639d4d 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
@@ -431,14 +431,17 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="size-3" />
+												</button>
 											</Badge>
 										))}
 									</div>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
index c68ba9eaa8..87349b3cc8 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
@@ -470,14 +470,17 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 											{field.value?.map((path, index) => (
 												<Badge key={index} variant="secondary">
 													{path}
-													<X
-														className="ml-1 size-3 cursor-pointer"
+													<button
+														type="button"
+														className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
 															form.setValue("watchPaths", newPaths);
 														}}
-													/>
+													>
+														<X className="size-3" />
+													</button>
 												</Badge>
 											))}
 										</div>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
index 2c3ce19752..9cbbafc606 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
@@ -460,14 +460,17 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 										{field.value?.map((path, index) => (
 											<Badge key={index} variant="secondary">
 												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
+												<button
+													type="button"
+													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
-												/>
+												>
+													<X className="size-3" />
+												</button>
 											</Badge>
 										))}
 									</div>

From a94f8b96d3615cae3d1e4e11bd2fa398e5aefd51 Mon Sep 17 00:00:00 2001
From: Yash Kumar <hello@yash.run>
Date: Thu, 9 Jul 2026 22:14:06 +0530
Subject: [PATCH 2/3] fix(ui): vertically align enable submodules and improve
 watchpath button a11y
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Properly negate FormItem spacing for the 'Enable Submodules' toggle inline layout
- Drop redundant focus outline hide and add aria-label for watchpath delete buttons

Co-authored-by: Fredy Acuña <fredhiixd@gmail.com>
---
 .../general/generic/save-bitbucket-provider.tsx            | 7 ++++---
 .../application/general/generic/save-git-provider.tsx      | 7 ++++---
 .../application/general/generic/save-gitea-provider.tsx    | 7 ++++---
 .../application/general/generic/save-github-provider.tsx   | 7 ++++---
 .../application/general/generic/save-gitlab-provider.tsx   | 7 ++++---
 .../general/generic/save-bitbucket-provider-compose.tsx    | 7 ++++---
 .../compose/general/generic/save-git-provider-compose.tsx  | 7 ++++---
 .../general/generic/save-gitea-provider-compose.tsx        | 7 ++++---
 .../general/generic/save-github-provider-compose.tsx       | 7 ++++---
 .../general/generic/save-gitlab-provider-compose.tsx       | 7 ++++---
 10 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
index d5c608d702..d316610414 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
@@ -440,7 +440,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 												{path}
 												<button
 													type="button"
-													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
+													aria-label="Remove watch path"
+													className="ml-1 cursor-pointer hover:text-destructive"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
@@ -496,14 +497,14 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
index 62f1542d46..889cd7aa91 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
@@ -244,7 +244,8 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 											{path}
 											<button
 												type="button"
-												className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
+												aria-label="Remove watch path"
+												className="ml-1 cursor-pointer hover:text-destructive"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
@@ -301,14 +302,14 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 						control={form.control}
 						name="enableSubmodules"
 						render={({ field }) => (
-							<FormItem className="flex items-center space-x-2">
+							<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 								<FormControl>
 									<Switch
 										checked={field.value}
 										onCheckedChange={field.onChange}
 									/>
 								</FormControl>
-								<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+								<FormLabel>Enable Submodules</FormLabel>
 							</FormItem>
 						)}
 					/>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
index a01c5c9a33..33d7ea6f7b 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
@@ -468,7 +468,8 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												{path}
 												<button
 													type="button"
-													className="cursor-pointer hover:text-destructive focus:outline-none"
+													aria-label="Remove watch path"
+													className="cursor-pointer hover:text-destructive"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
@@ -523,14 +524,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
index 4530c02df1..7edadc02c2 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
@@ -480,7 +480,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													{path}
 													<button
 														type="button"
-														className="cursor-pointer hover:text-destructive focus:outline-none"
+														aria-label="Remove watch path"
+														className="cursor-pointer hover:text-destructive"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
@@ -537,14 +538,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
index 12ff2d6177..0164403d4b 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
@@ -461,7 +461,8 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												{path}
 												<button
 													type="button"
-													className="cursor-pointer hover:text-destructive focus:outline-none"
+													aria-label="Remove watch path"
+													className="cursor-pointer hover:text-destructive"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
@@ -516,14 +517,14 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
index d19eff59a3..8877160576 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
@@ -444,7 +444,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 												{path}
 												<button
 													type="button"
-													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
+													aria-label="Remove watch path"
+													className="ml-1 cursor-pointer hover:text-destructive"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
@@ -500,14 +501,14 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
index d431b64ae2..307eab084f 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
@@ -253,7 +253,8 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 											{path}
 											<button
 												type="button"
-												className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
+												aria-label="Remove watch path"
+												className="ml-1 cursor-pointer hover:text-destructive"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
@@ -309,14 +310,14 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 						control={form.control}
 						name="enableSubmodules"
 						render={({ field }) => (
-							<FormItem className="flex items-center space-x-2">
+							<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 								<FormControl>
 									<Switch
 										checked={field.value}
 										onCheckedChange={field.onChange}
 									/>
 								</FormControl>
-								<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+								<FormLabel>Enable Submodules</FormLabel>
 							</FormItem>
 						)}
 					/>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
index 303b639d4d..4ac6aebd46 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
@@ -433,7 +433,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 												{path}
 												<button
 													type="button"
-													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
+													aria-label="Remove watch path"
+													className="ml-1 cursor-pointer hover:text-destructive"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
@@ -489,14 +490,14 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
index 87349b3cc8..9de5eb6408 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
@@ -472,7 +472,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 													{path}
 													<button
 														type="button"
-														className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
+														aria-label="Remove watch path"
+														className="ml-1 cursor-pointer hover:text-destructive"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
@@ -532,14 +533,14 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
index 9cbbafc606..ef3b3ed520 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
@@ -462,7 +462,8 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												{path}
 												<button
 													type="button"
-													className="ml-1 cursor-pointer hover:text-destructive focus:outline-none"
+													aria-label="Remove watch path"
+													className="ml-1 cursor-pointer hover:text-destructive"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
@@ -518,14 +519,14 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 							control={form.control}
 							name="enableSubmodules"
 							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
+								<FormItem className="flex flex-row items-center space-x-2 space-y-0">
 									<FormControl>
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
+									<FormLabel>Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

From 92c5879438bcd4ecbaed94a02503d09b27ba9263 Mon Sep 17 00:00:00 2001
From: Yash Kumar <hello@yash.run>
Date: Thu, 9 Jul 2026 22:48:33 +0530
Subject: [PATCH 3/3] style(ui): cleaned up class placement

Co-Authored-By: Fredy Acuna <57413945+fredhii@users.noreply.github.com>
---
 .../application/general/generic/save-bitbucket-provider.tsx   | 4 ++--
 .../application/general/generic/save-git-provider.tsx         | 4 ++--
 .../application/general/generic/save-gitea-provider.tsx       | 4 ++--
 .../application/general/generic/save-github-provider.tsx      | 4 ++--
 .../application/general/generic/save-gitlab-provider.tsx      | 4 ++--
 .../general/generic/save-bitbucket-provider-compose.tsx       | 4 ++--
 .../compose/general/generic/save-git-provider-compose.tsx     | 4 ++--
 .../compose/general/generic/save-gitea-provider-compose.tsx   | 4 ++--
 .../compose/general/generic/save-github-provider-compose.tsx  | 4 ++--
 .../compose/general/generic/save-gitlab-provider-compose.tsx  | 4 ++--
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
index d316610414..9386b06368 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
@@ -441,14 +441,14 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 												<button
 													type="button"
 													aria-label="Remove watch path"
-													className="ml-1 cursor-pointer hover:text-destructive"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
 												>
-													<X className="size-3" />
+													<X className="ml-1 size-3 cursor-pointer" />
 												</button>
 											</Badge>
 										))}
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
index 889cd7aa91..99b997d503 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx
@@ -245,14 +245,14 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 											<button
 												type="button"
 												aria-label="Remove watch path"
-												className="ml-1 cursor-pointer hover:text-destructive"
+												className="inline-flex items-center focus-visible:ring-2"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
 													form.setValue("watchPaths", newPaths);
 												}}
 											>
-												<X className="size-3" />
+												<X className="ml-1 size-3 cursor-pointer" />
 											</button>
 										</Badge>
 									))}
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
index 33d7ea6f7b..cdedcbef2a 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
@@ -469,14 +469,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												<button
 													type="button"
 													aria-label="Remove watch path"
-													className="cursor-pointer hover:text-destructive"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														field.onChange(newPaths);
 													}}
 												>
-													<X className="size-3" />
+													<X className="size-3 cursor-pointer hover:text-destructive" />
 												</button>
 											</Badge>
 										))}
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
index 7edadc02c2..18fd4aa0d0 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
@@ -481,14 +481,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													<button
 														type="button"
 														aria-label="Remove watch path"
-														className="cursor-pointer hover:text-destructive"
+														className="inline-flex items-center focus-visible:ring-2"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
 															field.onChange(newPaths);
 														}}
 													>
-														<X className="size-3" />
+														<X className="size-3 cursor-pointer hover:text-destructive" />
 													</button>
 												</Badge>
 											))}
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
index 0164403d4b..02bd1e8d14 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
@@ -462,14 +462,14 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												<button
 													type="button"
 													aria-label="Remove watch path"
-													className="cursor-pointer hover:text-destructive"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														field.onChange(newPaths);
 													}}
 												>
-													<X className="size-3" />
+													<X className="size-3 cursor-pointer hover:text-destructive" />
 												</button>
 											</Badge>
 										))}
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
index 8877160576..19f3ceec8f 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
@@ -445,14 +445,14 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 												<button
 													type="button"
 													aria-label="Remove watch path"
-													className="ml-1 cursor-pointer hover:text-destructive"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
 												>
-													<X className="size-3" />
+													<X className="ml-1 size-3 cursor-pointer" />
 												</button>
 											</Badge>
 										))}
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
index 307eab084f..a454ff6101 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx
@@ -254,14 +254,14 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 											<button
 												type="button"
 												aria-label="Remove watch path"
-												className="ml-1 cursor-pointer hover:text-destructive"
+												className="inline-flex items-center focus-visible:ring-2"
 												onClick={() => {
 													const newPaths = [...(field.value || [])];
 													newPaths.splice(index, 1);
 													form.setValue("watchPaths", newPaths);
 												}}
 											>
-												<X className="size-3" />
+												<X className="ml-1 size-3 cursor-pointer" />
 											</button>
 										</Badge>
 									))}
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
index 4ac6aebd46..c63ca116c7 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
@@ -434,14 +434,14 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 												<button
 													type="button"
 													aria-label="Remove watch path"
-													className="ml-1 cursor-pointer hover:text-destructive"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
 												>
-													<X className="size-3" />
+													<X className="ml-1 size-3 cursor-pointer" />
 												</button>
 											</Badge>
 										))}
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
index 9de5eb6408..a30f1b52ca 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
@@ -473,14 +473,14 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 													<button
 														type="button"
 														aria-label="Remove watch path"
-														className="ml-1 cursor-pointer hover:text-destructive"
+														className="inline-flex items-center focus-visible:ring-2"
 														onClick={() => {
 															const newPaths = [...(field.value || [])];
 															newPaths.splice(index, 1);
 															form.setValue("watchPaths", newPaths);
 														}}
 													>
-														<X className="size-3" />
+														<X className="ml-1 size-3 cursor-pointer" />
 													</button>
 												</Badge>
 											))}
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
index ef3b3ed520..01ddd77709 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
@@ -463,14 +463,14 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												<button
 													type="button"
 													aria-label="Remove watch path"
-													className="ml-1 cursor-pointer hover:text-destructive"
+													className="inline-flex items-center focus-visible:ring-2"
 													onClick={() => {
 														const newPaths = [...(field.value || [])];
 														newPaths.splice(index, 1);
 														form.setValue("watchPaths", newPaths);
 													}}
 												>
-													<X className="size-3" />
+													<X className="ml-1 size-3 cursor-pointer" />
 												</button>
 											</Badge>
 										))}