From a9f60ab9d43d86eb7210bd5b24ba726429ae8708 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Fri, 22 May 2026 00:01:06 +0800
Subject: [PATCH] fix incorrect toggle styling when the title is too long

---
 src/views/mobile/ApplicationLockPage.vue | 16 ++++++++++++----
 src/views/mobile/SignupPage.vue          |  9 +++++++--
 src/views/mobile/accounts/EditPage.vue   | 12 +++++++++---
 src/views/mobile/categories/EditPage.vue |  4 +++-
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/views/mobile/ApplicationLockPage.vue b/src/views/mobile/ApplicationLockPage.vue
index 1b617d8d..2297cfa1 100644
--- a/src/views/mobile/ApplicationLockPage.vue
+++ b/src/views/mobile/ApplicationLockPage.vue
@@ -8,12 +8,20 @@
         <f7-list strong inset dividers class="margin-top">
             <f7-list-item :title="tt('Status')" :after="tt(isEnableApplicationLock ? 'Enabled' : 'Disabled')"></f7-list-item>
             <f7-list-item v-if="isEnableApplicationLock">
-                <span>{{ tt('Unlock with PIN Code') }}</span>
-                <f7-toggle checked disabled></f7-toggle>
+                <template #after-title>
+                    {{ tt('Unlock with PIN Code') }}
+                </template>
+                <template #after>
+                    <f7-toggle checked disabled></f7-toggle>
+                </template>
             </f7-list-item>
             <f7-list-item v-if="isEnableApplicationLock && isSupportedWebAuthn">
-                <span>{{ tt('Unlock with WebAuthn') }}</span>
-                <f7-toggle :checked="isEnableApplicationLockWebAuthn" @toggle:change="isEnableApplicationLockWebAuthn = $event"></f7-toggle>
+                <template #after-title>
+                    {{ tt('Unlock with WebAuthn') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="isEnableApplicationLockWebAuthn" @toggle:change="isEnableApplicationLockWebAuthn = $event"></f7-toggle>
+                </template>
             </f7-list-item>
             <f7-list-button v-if="isEnableApplicationLock" @click="disable(null)">{{ tt('Disable') }}</f7-list-button>
             <f7-list-button v-if="!isEnableApplicationLock" @click="enable(null)">{{ tt('Enable') }}</f7-list-button>
diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
index 3f2be83e..4a01f2f5 100644
--- a/src/views/mobile/SignupPage.vue
+++ b/src/views/mobile/SignupPage.vue
@@ -129,8 +129,13 @@
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical">
-            <f7-list-item :title="tt('Use preset transaction categories')" link="#" @click="showPresetCategories = true">
-                <f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle>
+            <f7-list-item link="#" @click="showPresetCategories = true">
+                <template #after-title>
+                    {{ tt('Use preset transaction categories') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle>
+                </template>
             </f7-list-item>
         </f7-list>
 
diff --git a/src/views/mobile/accounts/EditPage.vue b/src/views/mobile/accounts/EditPage.vue
index ca9c2665..6a622940 100644
--- a/src/views/mobile/accounts/EditPage.vue
+++ b/src/views/mobile/accounts/EditPage.vue
@@ -267,7 +267,9 @@
             </f7-list-item>
 
             <f7-list-item :title="tt('Visible')" v-if="editAccountId">
-                <f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
+                <template #after>
+                    <f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-input
@@ -361,7 +363,9 @@
             </f7-list-item>
 
             <f7-list-item :title="tt('Visible')" v-if="editAccountId">
-                <f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
+                <template #after>
+                    <f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-input
@@ -537,7 +541,9 @@
                 </f7-list-item>
 
                 <f7-list-item :title="tt('Visible')" v-if="editAccountId && !isNewAccount(subAccount)">
-                    <f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
+                    <template #after>
+                        <f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
+                    </template>
                 </f7-list-item>
 
                 <f7-list-input
diff --git a/src/views/mobile/categories/EditPage.vue b/src/views/mobile/categories/EditPage.vue
index ad28ea55..dc294ab1 100644
--- a/src/views/mobile/categories/EditPage.vue
+++ b/src/views/mobile/categories/EditPage.vue
@@ -130,7 +130,9 @@
             </f7-list-item>
 
             <f7-list-item :title="tt('Visible')" v-if="editCategoryId">
-                <f7-toggle :checked="category.visible" @toggle:change="category.visible = $event"></f7-toggle>
+                <template #after>
+                    <f7-toggle :checked="category.visible" @toggle:change="category.visible = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-input