fix incorrect toggle styling when the title is too long

Co-authored-by: Second Brain Bot <bot@second-brain.local>

README.md

@@ -146,7 +146,7 @@ Currently available translations:
 | ta | தமிழ் | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Fta.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/ta.json) | [@hhharsha36](https://github.com/hhharsha36) |
 | th | ไทย | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Fth.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/th.json) | [@natthavat28](https://github.com/natthavat28) |
 | tr | Türkçe | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Ftr.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/tr.json) | [@aydnykn](https://github.com/aydnykn) |
-| uk | Українська | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Fuk.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/uk.json) | [@nktlitvinenko](https://github.com/nktlitvinenko) |
+| uk | Українська | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Fuk.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/uk.json) | [@nktlitvinenko](https://github.com/nktlitvinenko), [@grid-pilot](https://github.com/grid-pilot) |
 | vi | Tiếng Việt | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Fvi.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/vi.json) | [@f97](https://github.com/f97) |
 | zh-Hans | 中文 (简体) | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Fzh-Hans.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/zh-Hans.json) | / |
 | zh-Hant | 中文 (繁體) | [![Translation Progress](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmayswind%2FezBookkeeping-i18n-badge%2Fmain%2Fbadges%2Fzh-Hant.json)](https://github.com/mayswind/ezBookkeeping-i18n-badge/blob/main/untranslated/zh-Hant.json) | / |

contributors.json

@@ -63,7 +63,8 @@
             "aydnykn"
         ],
         "uk": [
-            "nktlitvinenko"
+            "nktlitvinenko",
+            "grid-pilot"
         ],
         "vi": [
             "f97"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ezbookkeeping",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezbookkeeping",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "private": true,
   "repository": {
     "type": "git",

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>
+                <template #after-title>
-                <f7-toggle checked disabled></f7-toggle>
+                    {{ 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>
+                <template #after-title>
-                <f7-toggle :checked="isEnableApplicationLockWebAuthn" @toggle:change="isEnableApplicationLockWebAuthn = $event"></f7-toggle>
+                    {{ 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>

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-list-item link="#" @click="showPresetCategories = true">
-                <f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle>
+                <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>
 

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

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