fix(ui): vertically align enable submodules and improve watchpath button 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 <[email protected]>
This commit is contained in:
Yash Kumar
2026-07-09 22:14:06 +05:30
co-authored by Fredy Acuña
parent ae95485b74
commit a94f8b96d3
10 changed files with 40 additions and 30 deletions
@@ -440,7 +440,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
{path} {path}
<button <button
type="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={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -496,14 +497,14 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -244,7 +244,8 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
{path} {path}
<button <button
type="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={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -301,14 +302,14 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -468,7 +468,8 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
{path} {path}
<button <button
type="button" type="button"
className="cursor-pointer hover:text-destructive focus:outline-none" aria-label="Remove watch path"
className="cursor-pointer hover:text-destructive"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -523,14 +524,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -480,7 +480,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
{path} {path}
<button <button
type="button" type="button"
className="cursor-pointer hover:text-destructive focus:outline-none" aria-label="Remove watch path"
className="cursor-pointer hover:text-destructive"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -537,14 +538,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -461,7 +461,8 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
{path} {path}
<button <button
type="button" type="button"
className="cursor-pointer hover:text-destructive focus:outline-none" aria-label="Remove watch path"
className="cursor-pointer hover:text-destructive"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -516,14 +517,14 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -444,7 +444,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
{path} {path}
<button <button
type="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={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -500,14 +501,14 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -253,7 +253,8 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
{path} {path}
<button <button
type="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={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -309,14 +310,14 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -433,7 +433,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
{path} {path}
<button <button
type="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={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -489,14 +490,14 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -472,7 +472,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
{path} {path}
<button <button
type="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={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -532,14 +533,14 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -462,7 +462,8 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
{path} {path}
<button <button
type="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={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
@@ -518,14 +519,14 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />