fix: prevent WebDAV password action overlap

apps/desktop/src/components/editor/EditorSettingsDialog.vue

@@ -2383,12 +2383,11 @@ watch(
                 <div class="space-y-2">
                   <Label for="webdav-password">{{ t("settings.syncPassword") }}</Label>
                   <div class="relative">
-                    <PasswordInput id="webdav-password" v-model="webdavPassword" :placeholder="webdavHasSavedPassword ? '••••••••' : t('settings.syncPasswordPlaceholder')" :disabled="webdavHasSavedPassword" autocomplete="current-password" />
-                    <Button
+                    <PasswordInput id="webdav-password" v-model="webdavPassword" :placeholder="webdavHasSavedPassword ? '••••••••' : t('settings.syncPasswordPlaceholder')" :disabled="webdavHasSavedPassword" :show-toggle="!webdavHasSavedPassword" autocomplete="current-password" />
+                    <button
                       v-if="webdavHasSavedPassword"
-                      variant="ghost"
-                      size="icon-xs"
-                      class="absolute right-1 top-1/2 -translate-y-1/2"
+                      type="button"
+                      class="absolute right-1 top-1/2 inline-flex size-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
                       :title="t('settings.syncClearSavedPassword')"
                       @click="
                         webdavRememberPassword = false;
@@ -2398,7 +2397,7 @@ watch(
                       "
                     >
                       <X class="size-3.5" />
-                    </Button>
+                    </button>
                   </div>
                   <label class="flex items-center gap-2 text-xs text-muted-foreground">
                     <input v-model="webdavRememberPassword" type="checkbox" class="h-4 w-4 shrink-0 accent-primary" />

apps/desktop/src/components/ui/PasswordInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { Eye, EyeOff } from "@lucide/vue";
 import { Input } from "@/components/ui/input";
 
@@ -10,17 +10,34 @@ const props = defineProps<{
   disabled?: boolean;
   class?: string;
   inputClass?: string;
+  showToggle?: boolean;
 }>();
 
 const visible = ref(false);
+const showToggle = computed(() => props.showToggle ?? true);
 </script>
 
 <template>
   <div :class="props.class" class="relative">
-    <Input v-model="model" :type="visible ? 'text' : 'password'" :placeholder="placeholder" :disabled="disabled" :class="props.inputClass" class="pr-8" v-bind="$attrs" />
-    <button type="button" :disabled="disabled" class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:pointer-events-none" tabindex="-1" @click="visible = !visible">
+    <Input v-model="model" :type="visible ? 'text' : 'password'" :placeholder="placeholder" :disabled="disabled" :class="[props.inputClass, showToggle ? 'pr-8' : undefined]" v-bind="$attrs" />
+    <button v-if="showToggle" type="button" :disabled="disabled" class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:pointer-events-none" tabindex="-1" @click="visible = !visible">
       <Eye v-if="!visible" class="size-3.5" />
       <EyeOff v-else class="size-3.5" />
     </button>
   </div>
 </template>
+
+<style scoped>
+:deep(input[type="password"]::-ms-reveal),
+:deep(input[type="password"]::-ms-clear) {
+  display: none;
+}
+
+:deep(input[type="password"]::-webkit-credentials-auto-fill-button),
+:deep(input[type="password"]::-webkit-caps-lock-indicator),
+:deep(input[type="password"]::-webkit-contacts-auto-fill-button) {
+  display: none !important;
+  visibility: hidden;
+  pointer-events: none;
+}
+</style>