Skip to content

fix(ui): resolve unclickable watch path removal button #4782

Open
imrja8 wants to merge 3 commits into
Dokploy:canaryfrom
imrja8:fix/watchpath-badge-removal
Open

fix(ui): resolve unclickable watch path removal button #4782
imrja8 wants to merge 3 commits into
Dokploy:canaryfrom
imrja8:fix/watchpath-badge-removal

Conversation

@imrja8

@imrja8 imrja8 commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

What is this PR about?

This PR fixes an issue where the "X" button used to remove watch paths was completely unclickable across all Git provider forms (both Application and Compose).

It also includes a minor UI tweak to perfectly vertically align the Enable Submodules toggle switch and label.

Why the issue existed:
The native Shadcn Badge component comes with a default CSS rule ([&>svg]:pointer-events-none). Because the <X> icon was rendered as a direct SVG child of the badge, the browser was applying this rule, which mathematically swallowed all click events and made the "X" strictly non-interactive.

How it was solved:
Instead of fighting CSS specificity with !important utility class overrides, this PR takes a native structural approach. The <X> icon is now wrapped in a standard <button> element. This naturally prevents the parent badge's SVG CSS rule from targeting the icon, fully restoring interactivity in a clean, HTML-native way.

Checklist

Before submitting this PR, please make sure that:

  • You created a dedicated branch based on the canary branch.
  • You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
  • You have tested this PR in your local instance. If you have not tested it yet, please do so before submitting. This helps avoid wasting maintainers' time reviewing code that has not been verified by you.

Issues related (if applicable)

closes #4780

Screenshots & Recordings

  • Watchpath Badge Removal Working Properly:
Screen.Recording.2026-07-09.at.16.23.50.mov
  • Before vs After: Enable Submodules Alignment Fix:
Enable Submodules Alignment Comparison

@imrja8 imrja8 requested a review from Siumauricio as a code owner July 9, 2026 11:33
@dosubot dosubot Bot added size:M This PR changes 30-99 lines, ignoring generated files. bug Something isn't working labels Jul 9, 2026
@fredhii

fredhii commented Jul 9, 2026

Copy link
Copy Markdown

Nice fix, and the root-cause writeup on [&>svg]:pointer-events-none is spot on. I landed on the same wrapper approach in a duplicate PR (#4785), which I am closing in favor of this one. Two small accessibility suggestions before it merges:

  • Add aria-label="Remove watch path" to the button. Right now a screen reader just announces "button" with no indication of what it does.
  • Drop focus:outline-none. It hides the keyboard focus ring without a replacement, so Tab users lose track of where they are. If the default ring looks off, focus-visible:ring-2 is a safer swap.

One more thing: the description mentions an "Enable Submodules" toggle alignment tweak, but I do not see it in the diff (only the badge fix landed). Might be worth checking whether that change got committed.

Thanks for jumping on this one.

@imrja8

imrja8 commented Jul 9, 2026

Copy link
Copy Markdown
Contributor Author

@fredhii Sure. I'll add the accessibility suggestions, review the additional accessibility changes in your PR, adopt any relevant improvements, and add you as a co-author on the commit if I use your changes.

…ton a11y

- 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>
@dosubot dosubot Bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels Jul 9, 2026
Co-Authored-By: Fredy Acuna <57413945+fredhii@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Unable to delete a watchpath

2 participants