upgrade framework7 to 9.0

package-lock.json

@@ -17,9 +17,9 @@
         "crypto-js": "^4.2.0",
         "dom7": "^4.0.6",
         "echarts": "^6.0.0",
-        "framework7": "^8.3.4",
+        "framework7": "^9.0.1",
         "framework7-icons": "^5.0.5",
-        "framework7-vue": "^8.3.4",
+        "framework7-vue": "^9.0.1",
         "jalaali-js": "^1.2.8",
         "leaflet": "^1.9.4",
         "line-awesome": "^1.3.0",
@@ -28,7 +28,7 @@
         "pinia": "^3.0.4",
         "register-service-worker": "^1.7.2",
         "skeleton-elements": "^4.0.1",
-        "swiper": "^10.2.0",
+        "swiper": "^12.0.3",
         "ua-parser-js": "^1.0.39",
         "vue": "^3.5.25",
         "vue-echarts": "^8.0.1",
@@ -8599,17 +8599,17 @@
       }
     },
     "node_modules/framework7": {
-      "version": "8.3.4",
+      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/framework7/-/framework7-8.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/framework7/-/framework7-9.0.1.tgz",
-      "integrity": "sha512-RKrEeNTxKEzhxJMaw8hLoIZbzHMzLZDFmQlpbxYFUqxyGDH8r6+NFGDCxOFnpkP1VI+L5UsDenrxo8vEzh929Q==",
+      "integrity": "sha512-bKuq/6L5vp2Z9WApQ6KZA638hCqOaHIg0I9I+QybHcC1qIDV0p1LpCbaf8cJ218UGZwQALMAGxeYYqYaZh2wSg==",
       "license": "MIT",
       "dependencies": {
         "dom7": "^4.0.6",
         "htm": "^3.1.1",
         "path-to-regexp": "^6.2.0",
         "skeleton-elements": "^4.0.1",
-        "ssr-window": "^4.0.2",
+        "ssr-window": "^5.0.1",
-        "swiper": "^10.2.0"
+        "swiper": "^12.0.3"
       },
       "funding": {
         "type": "patreon",
@@ -8626,15 +8626,21 @@
       }
     },
     "node_modules/framework7-vue": {
-      "version": "8.3.4",
+      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/framework7-vue/-/framework7-vue-8.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/framework7-vue/-/framework7-vue-9.0.1.tgz",
-      "integrity": "sha512-gy1rwwsJ2TQ1BU7wlyn2yGEdS/zpfE9kvRxZZqBKwjqR6Gej3/mJzmMsEQRSgYwsz6cN/sIrdO7sWW+BNDX3Yw==",
+      "integrity": "sha512-9pC29mQmjRqa5pFdEzpe65kik4pGV2pnFCdTif2HUXfCycA64s2XoxI32uAGrcRBlS3wTzJtcSyaoFLHG2oX8A==",
       "license": "MIT",
       "funding": {
         "type": "patreon",
         "url": "https://www.patreon.com/framework7"
       }
     },
+    "node_modules/framework7/node_modules/ssr-window": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-5.0.1.tgz",
+      "integrity": "sha512-WVXlhQsm54HC+FnJfEbccEgNF7mKXtnFUB8Xn7rx2dsWHOlBdqezdX88Vjh6pVGaa0ZvL+PoSu7rEcBuNmxt6g==",
+      "license": "MIT"
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -13354,9 +13360,9 @@
       }
     },
     "node_modules/swiper": {
-      "version": "10.3.1",
+      "version": "12.0.3",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.3.tgz",
-      "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==",
+      "integrity": "sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==",
       "funding": [
         {
           "type": "patreon",

package.json

@@ -27,9 +27,9 @@
     "crypto-js": "^4.2.0",
     "dom7": "^4.0.6",
     "echarts": "^6.0.0",
-    "framework7": "^8.3.4",
+    "framework7": "^9.0.1",
     "framework7-icons": "^5.0.5",
-    "framework7-vue": "^8.3.4",
+    "framework7-vue": "^9.0.1",
     "jalaali-js": "^1.2.8",
     "leaflet": "^1.9.4",
     "line-awesome": "^1.3.0",
@@ -38,7 +38,7 @@
     "pinia": "^3.0.4",
     "register-service-worker": "^1.7.2",
     "skeleton-elements": "^4.0.1",
-    "swiper": "^10.2.0",
+    "swiper": "^12.0.3",
     "ua-parser-js": "^1.0.39",
     "vue": "^3.5.25",
     "vue-echarts": "^8.0.1",

src/components/mobile/ListItemSelectionPopup.vue

@@ -2,7 +2,6 @@
     <f7-popup push :opened="show" @popup:open="onPopupOpen" @popup:closed="onPopupClosed">
         <f7-page>
             <f7-navbar :outline="false">
-                <f7-nav-left></f7-nav-left>
                 <f7-nav-title :title="title" v-if="title"></f7-nav-title>
                 <f7-nav-right>
                     <f7-link popup-close :text="tt('Done')"></f7-link>

src/components/mobile/ListItemSelectionSheet.vue

@@ -4,7 +4,6 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
             <div class="right">
                 <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>

src/components/mobile/MapSheet.vue

@@ -11,7 +11,7 @@
                 <f7-link :text="tt('Done')" @click="save"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-page-content class="no-margin-vertical no-padding-vertical">
+        <f7-page-content>
             <map-view ref="map" height="400px" :geo-location="geoLocation" @click="updateSpecifiedGeoLocation">
                 <template #error-title="{ mapSupported, mapDependencyLoaded }">
                     <div class="display-flex padding justify-content-space-between align-items-center">

src/components/mobile/PasscodeInputSheet.vue

@@ -9,15 +9,13 @@
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin" v-if="hint">{{ hint }}</p>
                 <slot></slot>
-                <f7-list strong class="no-margin">
+                <f7-list class="no-margin">
                     <f7-list-input
                         type="number"
                         autocomplete="one-time-code"
                         outline
-                        floating-label
                         clear-button
                         class="no-margin no-padding-bottom"
-                        :label="tt('Passcode')"
                         :placeholder="tt('Passcode')"
                         v-model:value="currentPasscode"
                         @keyup.enter="confirm()"

src/components/mobile/PasswordInputSheet.vue

@@ -8,16 +8,14 @@
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin" v-if="hint">{{ hint }}</p>
-                <f7-list strong class="no-margin">
+                <f7-list class="no-margin">
                     <f7-list-input
                         type="password"
                         autocomplete="current-password"
                         outline
-                        floating-label
                         clear-button
                         class="no-margin no-padding-bottom"
                         :class="color ? 'color-' + color : ''"
-                        :label="tt('Current Password')"
                         :placeholder="tt('Current Password')"
                         v-model:value="currentPassword"
                         @keyup.enter="confirm()"

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -13,15 +13,15 @@
                          :text="tt('Add')" v-if="!allTags || !allTags.length || noAvailableTag" @click="addNewTag"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-searchbar ref="searchbar" custom-searchs
+        <f7-page-content :class="heightClass">
-                      :value="filterContent"
+            <f7-searchbar ref="searchbar" custom-searchs
-                      :placeholder="tt('Find tag')"
+                          :value="filterContent"
-                      :disable-button="false"
+                          :placeholder="tt('Find tag')"
-                      v-if="enableFilter"
+                          :disable-button="false"
-                      @input="filterContent = $event.target.value"
+                          v-if="enableFilter"
-                      @focus="onSearchBarFocus">
+                          @input="filterContent = $event.target.value"
-        </f7-searchbar>
+                          @focus="onSearchBarFocus">
-        <f7-page-content :class="'no-padding-top ' + heightClass">
+            </f7-searchbar>
             <f7-list class="no-margin-top no-margin-bottom" v-if="(!allTags || !allTags.length || noAvailableTag) && !newTag">
                 <f7-list-item :title="tt('No available tag')"></f7-list-item>
             </f7-list>
@@ -49,7 +49,7 @@
                               v-if="allowAddNewTag && !newTag"
                               @click="addNewTag()">
                 </f7-list-item>
-                <f7-list-item checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
+                <f7-list-item class="editing-list-item" checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
                     <template #media>
                         <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                     </template>
@@ -154,9 +154,9 @@ const noAvailableTag = computed<boolean>(() => {
 });
 
 function getHeightClass(): string {
-    if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 8) {
+    if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 6) {
         return 'tag-selection-huge-sheet';
-    } else if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 4) {
+    } else if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 3) {
         return 'tag-selection-large-sheet';
     } else {
         return 'tag-selection-default-sheet';
@@ -240,23 +240,23 @@ function onSheetClosed(): void {
 
 <style>
 .tag-selection-default-sheet {
-    height: 200px;
+    height: 310px;
 }
 
 @media (min-height: 630px) {
     .tag-selection-large-sheet {
-        height: 260px;
+        height: 370px;
     }
 
     .tag-selection-huge-sheet {
-        height: 380px;
+        height: 500px;
     }
 }
 
 @media (max-height: 629px) {
     .tag-selection-large-sheet,
     .tag-selection-huge-sheet {
-        height: 240px;
+        height: 360px;
     }
 }
 

src/components/mobile/TreeViewSelectionSheet.vue

@@ -3,20 +3,19 @@
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
             <div class="right">
                 <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-searchbar ref="searchbar" custom-searchs
+        <f7-page-content :class="heightClass">
-                      :value="filterContent"
+            <f7-searchbar ref="searchbar" custom-searchs
-                      :placeholder="filterPlaceholder"
+                          :value="filterContent"
-                      :disable-button="false"
+                          :placeholder="filterPlaceholder"
-                      v-if="enableFilter"
+                          :disable-button="false"
-                      @input="filterContent = $event.target.value"
+                          v-if="enableFilter"
-                      @focus="onSearchBarFocus">
+                          @input="filterContent = $event.target.value"
-        </f7-searchbar>
+                          @focus="onSearchBarFocus">
-        <f7-page-content :class="'no-padding-top ' + heightClass">
+            </f7-searchbar>
             <f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
                 <f7-list-item :title="filterNoItemsText"></f7-list-item>
             </f7-list>
@@ -150,23 +149,23 @@ function onSheetClosed(): void {
 
 <style>
 .tree-view-selection-default-sheet {
-    height: 200px;
+    height: 310px;
 }
 
 @media (min-height: 630px) {
     .tree-view-selection-large-sheet {
-        height: 260px;
+        height: 370px;
     }
 
     .tree-view-selection-huge-sheet {
-        height: 380px;
+        height: 500px;
     }
 }
 
 @media (max-height: 629px) {
     .tree-view-selection-large-sheet,
     .tree-view-selection-huge-sheet {
-        height: 240px;
+        height: 360px;
     }
 }
 </style>

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -8,15 +8,15 @@
                 <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-searchbar ref="searchbar" custom-searchs
+        <f7-page-content>
-                      :value="filterContent"
+            <f7-searchbar ref="searchbar" custom-searchs
-                      :placeholder="filterPlaceholder"
+                          :value="filterContent"
-                      :disable-button="false"
+                          :placeholder="filterPlaceholder"
-                      v-if="enableFilter"
+                          :disable-button="false"
-                      @input="filterContent = $event.target.value"
+                          v-if="enableFilter"
-                      @focus="onSearchBarFocus">
+                          @input="filterContent = $event.target.value"
-        </f7-searchbar>
+                          @focus="onSearchBarFocus">
-        <f7-page-content class="no-padding-top">
+            </f7-searchbar>
             <div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
                 <div>
                     <div class="primary-list-container">
@@ -149,13 +149,13 @@ function onSheetClosed(): void {
 
 <style>
 .primary-list-container, .secondary-list-container {
-    height: 260px;
+    height: 310px;
     overflow-y: auto;
 }
 
 @media (max-height: 629px) {
     .primary-list-container, .secondary-list-container {
-        height: 240px;
+        height: 290px;
     }
 }
 

src/styles/mobile/font-size-default.scss

@@ -4,21 +4,21 @@
     --f7-font-size: 14px;
     --f7-navbar-font-size: 17px;
     --f7-searchbar-input-font-size: 17px;
-    --f7-searchbar-input-height: 32px;
+    --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 17px;
     --f7-tabbar-icon-size: 28px;
-    --f7-tabbar-icons-height: 50px;
+    --f7-tabbar-icons-height: 80px;
     --f7-tabbar-label-font-size: 12px;
     --f7-label-font-size: 12px;
     --f7-label-height: 16px;
     --f7-input-font-size: 16px;
     --f7-input-height: 40px;
-    --f7-button-font-size: 14px;
+    --f7-button-font-size: 15px;
-    --f7-button-small-font-size: 13px;
+    --f7-button-small-font-size: 14px;
-    --f7-button-small-height: 26px;
+    --f7-button-small-height: 28px;
     --f7-button-large-font-size: 17px;
     --f7-chip-font-size: 14px;
-    --f7-block-title-font-size: 16px;
+    --f7-block-title-font-size: 17px;
     --f7-block-title-line-height: 20px;
     --f7-block-font-size: 17px;
     --f7-block-footer-font-size: 14px;
@@ -32,7 +32,7 @@
     --f7-list-item-after-font-size: 17px;
     --f7-list-item-footer-font-size: 12px;
     --f7-list-button-font-size: 17px;
-    --f7-list-item-min-height: 44px;
+    --f7-list-item-min-height: 52px;
     --f7-list-item-padding-horizontal: 16px;
     --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 17px;
@@ -41,7 +41,7 @@
     --f7-dialog-font-size: 14px;
     --f7-dialog-button-font-size: 17px;
     --f7-dialog-input-font-size: 14px;
-    --f7-dialog-input-height: 32px;
+    --f7-dialog-input-height: 40px;
     --f7-actions-label-font-size: 13px;
     --f7-actions-button-font-size: 20px;
     --f7-toast-font-size: 14px;
@@ -51,10 +51,10 @@
     --ebk-icon-text-margin: 2px;
     --ebk-hide-icon-font-size: 18px;
     --ebk-separate-icon-font-size: 24px;
-    --ebk-big-icon-button-size: 42px;
+    --ebk-big-icon-button-size: 48px;
-    --ebk-icon-after-text-font-size: 16px;
+    --ebk-icon-after-text-font-size: 17px;
     --ebk-right-bottom-icon-font-size: 13px;
-    --ebk-page-title-bar-icon-font-size: 16px;
+    --ebk-page-title-bar-icon-font-size: 17px;
     --ebk-list-item-checked-icon-font-size: 20px;
     --ebk-searchbar-icon-font-size: 20px;
     --ebk-searchbar-disable-button-font-size: 17px;

src/styles/mobile/font-size-large.scss

@@ -4,21 +4,21 @@
     --f7-font-size: 15px;
     --f7-navbar-font-size: 18px;
     --f7-searchbar-input-font-size: 18px;
-    --f7-searchbar-input-height: 32px;
+    --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 18px;
     --f7-tabbar-icon-size: 29px;
-    --f7-tabbar-icons-height: 50px;
+    --f7-tabbar-icons-height: 80px;
     --f7-tabbar-label-font-size: 13px;
     --f7-label-font-size: 13px;
     --f7-label-height: 16px;
     --f7-input-font-size: 17px;
     --f7-input-height: 40px;
-    --f7-button-font-size: 15px;
+    --f7-button-font-size: 16px;
-    --f7-button-small-font-size: 14px;
+    --f7-button-small-font-size: 15px;
-    --f7-button-small-height: 26px;
+    --f7-button-small-height: 28px;
     --f7-button-large-font-size: 18px;
     --f7-chip-font-size: 15px;
-    --f7-block-title-font-size: 17px;
+    --f7-block-title-font-size: 18px;
     --f7-block-title-line-height: 20px;
     --f7-block-font-size: 17px;
     --f7-block-footer-font-size: 15px;
@@ -32,7 +32,7 @@
     --f7-list-item-after-font-size: 17px;
     --f7-list-item-footer-font-size: 13px;
     --f7-list-button-font-size: 17px;
-    --f7-list-item-min-height: 46px;
+    --f7-list-item-min-height: 54px;
     --f7-list-item-padding-horizontal: 16px;
     --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 18px;
@@ -41,7 +41,7 @@
     --f7-dialog-font-size: 15px;
     --f7-dialog-button-font-size: 18px;
     --f7-dialog-input-font-size: 15px;
-    --f7-dialog-input-height: 34px;
+    --f7-dialog-input-height: 42px;
     --f7-actions-label-font-size: 14px;
     --f7-actions-button-font-size: 21px;
     --f7-toast-font-size: 15px;
@@ -51,10 +51,10 @@
     --ebk-icon-text-margin: 3px;
     --ebk-hide-icon-font-size: 19px;
     --ebk-separate-icon-font-size: 28px;
-    --ebk-big-icon-button-size: 44px;
+    --ebk-big-icon-button-size: 50px;
-    --ebk-icon-after-text-font-size: 17px;
+    --ebk-icon-after-text-font-size: 18px;
     --ebk-right-bottom-icon-font-size: 13px;
-    --ebk-page-title-bar-icon-font-size: 17px;
+    --ebk-page-title-bar-icon-font-size: 18px;
     --ebk-list-item-checked-icon-font-size: 21px;
     --ebk-searchbar-icon-font-size: 20px;
     --ebk-searchbar-disable-button-font-size: 17px;

src/styles/mobile/font-size-small.scss

@@ -4,21 +4,21 @@
     --f7-font-size: 13px;
     --f7-navbar-font-size: 16px;
     --f7-searchbar-input-font-size: 16px;
-    --f7-searchbar-input-height: 32px;
+    --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 16px;
     --f7-tabbar-icon-size: 28px;
-    --f7-tabbar-icons-height: 50px;
+    --f7-tabbar-icons-height: 80px;
     --f7-tabbar-label-font-size: 12px;
     --f7-label-font-size: 12px;
     --f7-label-height: 16px;
     --f7-input-font-size: 15px;
     --f7-input-height: 40px;
-    --f7-button-font-size: 13px;
+    --f7-button-font-size: 14px;
-    --f7-button-small-font-size: 12px;
+    --f7-button-small-font-size: 13px;
-    --f7-button-small-height: 26px;
+    --f7-button-small-height: 28px;
     --f7-button-large-font-size: 16px;
     --f7-chip-font-size: 13px;
-    --f7-block-title-font-size: 15px;
+    --f7-block-title-font-size: 16px;
     --f7-block-title-line-height: 20px;
     --f7-block-font-size: 15px;
     --f7-block-footer-font-size: 13px;
@@ -32,7 +32,7 @@
     --f7-list-item-after-font-size: 15px;
     --f7-list-item-footer-font-size: 12px;
     --f7-list-button-font-size: 15px;
-    --f7-list-item-min-height: 40px;
+    --f7-list-item-min-height: 48px;
     --f7-list-item-padding-horizontal: 12px;
     --f7-list-media-item-padding-vertical: 8px;
     --f7-treeview-label-font-size: 16px;
@@ -41,7 +41,7 @@
     --f7-dialog-font-size: 13px;
     --f7-dialog-button-font-size: 16px;
     --f7-dialog-input-font-size: 13px;
-    --f7-dialog-input-height: 31px;
+    --f7-dialog-input-height: 39px;
     --f7-actions-label-font-size: 12px;
     --f7-actions-button-font-size: 18px;
     --f7-toast-font-size: 13px;
@@ -51,10 +51,10 @@
     --ebk-icon-text-margin: 2px;
     --ebk-hide-icon-font-size: 18px;
     --ebk-separate-icon-font-size: 20px;
-    --ebk-big-icon-button-size: 42px;
+    --ebk-big-icon-button-size: 48px;
-    --ebk-icon-after-text-font-size: 15px;
+    --ebk-icon-after-text-font-size: 16px;
     --ebk-right-bottom-icon-font-size: 13px;
-    --ebk-page-title-bar-icon-font-size: 15px;
+    --ebk-page-title-bar-icon-font-size: 16px;
     --ebk-list-item-checked-icon-font-size: 20px;
     --ebk-searchbar-icon-font-size: 20px;
     --ebk-searchbar-disable-button-font-size: 17px;

src/styles/mobile/font-size-x-large.scss

@@ -4,21 +4,21 @@
     --f7-font-size: 16px;
     --f7-navbar-font-size: 19px;
     --f7-searchbar-input-font-size: 19px;
-    --f7-searchbar-input-height: 32px;
+    --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 19px;
     --f7-tabbar-icon-size: 30px;
-    --f7-tabbar-icons-height: 54px;
+    --f7-tabbar-icons-height: 84px;
     --f7-tabbar-label-font-size: 14px;
     --f7-label-font-size: 14px;
     --f7-label-height: 16px;
     --f7-input-font-size: 18px;
     --f7-input-height: 40px;
-    --f7-button-font-size: 16px;
+    --f7-button-font-size: 17px;
-    --f7-button-small-font-size: 15px;
+    --f7-button-small-font-size: 16px;
-    --f7-button-small-height: 26px;
+    --f7-button-small-height: 28px;
     --f7-button-large-font-size: 19px;
     --f7-chip-font-size: 16px;
-    --f7-block-title-font-size: 18px;
+    --f7-block-title-font-size: 19px;
     --f7-block-title-line-height: 20px;
     --f7-block-font-size: 18px;
     --f7-block-footer-font-size: 16px;
@@ -32,7 +32,7 @@
     --f7-list-item-after-font-size: 18px;
     --f7-list-item-footer-font-size: 14px;
     --f7-list-button-font-size: 18px;
-    --f7-list-item-min-height: 48px;
+    --f7-list-item-min-height: 56px;
     --f7-list-item-padding-horizontal: 16px;
     --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 19px;
@@ -41,7 +41,7 @@
     --f7-dialog-font-size: 16px;
     --f7-dialog-button-font-size: 19px;
     --f7-dialog-input-font-size: 16px;
-    --f7-dialog-input-height: 36px;
+    --f7-dialog-input-height: 44px;
     --f7-actions-label-font-size: 15px;
     --f7-actions-button-font-size: 22px;
     --f7-toast-font-size: 16px;
@@ -51,10 +51,10 @@
     --ebk-icon-text-margin: 3px;
     --ebk-hide-icon-font-size: 20px;
     --ebk-separate-icon-font-size: 32px;
-    --ebk-big-icon-button-size: 48px;
+    --ebk-big-icon-button-size: 54px;
-    --ebk-icon-after-text-font-size: 17px;
+    --ebk-icon-after-text-font-size: 19px;
     --ebk-right-bottom-icon-font-size: 14px;
-    --ebk-page-title-bar-icon-font-size: 17px;
+    --ebk-page-title-bar-icon-font-size: 19px;
     --ebk-list-item-checked-icon-font-size: 22px;
     --ebk-searchbar-icon-font-size: 20px;
     --ebk-searchbar-disable-button-font-size: 18px;

src/styles/mobile/font-size-xx-large.scss

@@ -4,18 +4,18 @@
     --f7-font-size: 17px;
     --f7-navbar-font-size: 20px;
     --f7-searchbar-input-font-size: 20px;
-    --f7-searchbar-input-height: 34px;
+    --f7-searchbar-input-height: 46px;
     --f7-toolbar-font-size: 20px;
     --f7-tabbar-icon-size: 32px;
-    --f7-tabbar-icons-height: 62px;
+    --f7-tabbar-icons-height: 92px;
     --f7-tabbar-label-font-size: 17px;
     --f7-label-font-size: 16px;
     --f7-label-height: 18px;
     --f7-input-font-size: 20px;
     --f7-input-height: 56px;
-    --f7-button-font-size: 18px;
+    --f7-button-font-size: 19px;
-    --f7-button-small-font-size: 15px;
+    --f7-button-small-font-size: 16px;
-    --f7-button-small-height: 26px;
+    --f7-button-small-height: 28px;
     --f7-button-large-font-size: 20px;
     --f7-chip-font-size: 16px;
     --f7-block-title-font-size: 20px;
@@ -32,7 +32,7 @@
     --f7-list-item-after-font-size: 20px;
     --f7-list-item-footer-font-size: 15px;
     --f7-list-button-font-size: 20px;
-    --f7-list-item-min-height: 50px;
+    --f7-list-item-min-height: 58px;
     --f7-list-item-padding-horizontal: 16px;
     --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 20px;
@@ -41,7 +41,7 @@
     --f7-dialog-font-size: 17px;
     --f7-dialog-button-font-size: 20px;
     --f7-dialog-input-font-size: 17px;
-    --f7-dialog-input-height: 40px;
+    --f7-dialog-input-height: 48px;
     --f7-actions-label-font-size: 15px;
     --f7-actions-button-font-size: 22px;
     --f7-toast-font-size: 17px;
@@ -51,10 +51,10 @@
     --ebk-icon-text-margin: 4px;
     --ebk-hide-icon-font-size: 24px;
     --ebk-separate-icon-font-size: 36px;
-    --ebk-big-icon-button-size: 54px;
+    --ebk-big-icon-button-size: 60px;
-    --ebk-icon-after-text-font-size: 18px;
+    --ebk-icon-after-text-font-size: 20px;
     --ebk-right-bottom-icon-font-size: 15px;
-    --ebk-page-title-bar-icon-font-size: 18px;
+    --ebk-page-title-bar-icon-font-size: 20px;
     --ebk-list-item-checked-icon-font-size: 24px;
     --ebk-searchbar-icon-font-size: 22px;
     --ebk-searchbar-disable-button-font-size: 20px;

src/styles/mobile/font-size-xxx-large.scss

@@ -4,18 +4,18 @@
     --f7-font-size: 19px;
     --f7-navbar-font-size: 22px;
     --f7-searchbar-input-font-size: 22px;
-    --f7-searchbar-input-height: 36px;
+    --f7-searchbar-input-height: 48px;
     --f7-toolbar-font-size: 22px;
     --f7-tabbar-icon-size: 34px;
-    --f7-tabbar-icons-height: 66px;
+    --f7-tabbar-icons-height: 96px;
     --f7-tabbar-label-font-size: 19px;
     --f7-label-font-size: 18px;
     --f7-label-height: 20px;
     --f7-input-font-size: 22px;
     --f7-input-height: 60px;
-    --f7-button-font-size: 20px;
+    --f7-button-font-size: 21px;
-    --f7-button-small-font-size: 17px;
+    --f7-button-small-font-size: 18px;
-    --f7-button-small-height: 30px;
+    --f7-button-small-height: 32px;
     --f7-button-large-font-size: 22px;
     --f7-chip-font-size: 18px;
     --f7-block-title-font-size: 22px;
@@ -32,7 +32,7 @@
     --f7-list-item-after-font-size: 22px;
     --f7-list-item-footer-font-size: 17px;
     --f7-list-button-font-size: 22px;
-    --f7-list-item-min-height: 52px;
+    --f7-list-item-min-height: 60px;
     --f7-list-item-padding-horizontal: 16px;
     --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 22px;
@@ -41,7 +41,7 @@
     --f7-dialog-font-size: 19px;
     --f7-dialog-button-font-size: 22px;
     --f7-dialog-input-font-size: 19px;
-    --f7-dialog-input-height: 44px;
+    --f7-dialog-input-height: 52px;
     --f7-actions-label-font-size: 17px;
     --f7-actions-button-font-size: 24px;
     --f7-toast-font-size: 19px;
@@ -51,10 +51,10 @@
     --ebk-icon-text-margin: 4px;
     --ebk-hide-icon-font-size: 26px;
     --ebk-separate-icon-font-size: 40px;
-    --ebk-big-icon-button-size: 58px;
+    --ebk-big-icon-button-size: 64px;
-    --ebk-icon-after-text-font-size: 20px;
+    --ebk-icon-after-text-font-size: 22px;
     --ebk-right-bottom-icon-font-size: 17px;
-    --ebk-page-title-bar-icon-font-size: 20px;
+    --ebk-page-title-bar-icon-font-size: 22px;
     --ebk-list-item-checked-icon-font-size: 26px;
     --ebk-searchbar-icon-font-size: 24px;
     --ebk-searchbar-disable-button-font-size: 22px;

src/styles/mobile/font-size-xxxx-large.scss

@@ -4,18 +4,18 @@
     --f7-font-size: 21px;
     --f7-navbar-font-size: 24px;
     --f7-searchbar-input-font-size: 24px;
-    --f7-searchbar-input-height: 38px;
+    --f7-searchbar-input-height: 50px;
     --f7-toolbar-font-size: 24px;
     --f7-tabbar-icon-size: 36px;
-    --f7-tabbar-icons-height: 70px;
+    --f7-tabbar-icons-height: 100px;
     --f7-tabbar-label-font-size: 21px;
     --f7-label-font-size: 20px;
     --f7-label-height: 22px;
     --f7-input-font-size: 24px;
     --f7-input-height: 64px;
-    --f7-button-font-size: 22px;
+    --f7-button-font-size: 23px;
-    --f7-button-small-font-size: 19px;
+    --f7-button-small-font-size: 20px;
-    --f7-button-small-height: 32px;
+    --f7-button-small-height: 34px;
     --f7-button-large-font-size: 24px;
     --f7-chip-font-size: 20px;
     --f7-block-title-font-size: 24px;
@@ -32,7 +32,7 @@
     --f7-list-item-after-font-size: 24px;
     --f7-list-item-footer-font-size: 19px;
     --f7-list-button-font-size: 24px;
-    --f7-list-item-min-height: 54px;
+    --f7-list-item-min-height: 62px;
     --f7-list-item-padding-horizontal: 16px;
     --f7-list-media-item-padding-vertical: 10px;
     --f7-treeview-label-font-size: 24px;
@@ -41,7 +41,7 @@
     --f7-dialog-font-size: 21px;
     --f7-dialog-button-font-size: 24px;
     --f7-dialog-input-font-size: 21px;
-    --f7-dialog-input-height: 48px;
+    --f7-dialog-input-height: 56px;
     --f7-actions-label-font-size: 19px;
     --f7-actions-button-font-size: 26px;
     --f7-toast-font-size: 21px;
@@ -51,10 +51,10 @@
     --ebk-icon-text-margin: 4px;
     --ebk-hide-icon-font-size: 28px;
     --ebk-separate-icon-font-size: 44px;
-    --ebk-big-icon-button-size: 64px;
+    --ebk-big-icon-button-size: 70px;
-    --ebk-icon-after-text-font-size: 22px;
+    --ebk-icon-after-text-font-size: 24px;
     --ebk-right-bottom-icon-font-size: 19px;
-    --ebk-page-title-bar-icon-font-size: 22px;
+    --ebk-page-title-bar-icon-font-size: 24px;
     --ebk-list-item-checked-icon-font-size: 28px;
     --ebk-searchbar-icon-font-size: 26px;
     --ebk-searchbar-disable-button-font-size: 24px;

src/styles/mobile/global.scss

@@ -89,6 +89,8 @@ input[type=number] {
 
 /** Replacing the default style of framework7 **/
 :root {
+    --f7-toolbar-inner-padding-left: 8px;
+    --f7-toolbar-inner-padding-right: 8px;
     --f7-popup-push-offset: 5px;
     --f7-color-gray: #8e8e93;
     --f7-color-gray-rgb: 142, 142, 147;
@@ -203,8 +205,11 @@ i.icon.la, i.icon.las, i.icon.lab {
 }
 
 .lang-popover-menu .popover-inner {
-    max-height: 300px;
+    max-height: 350px;
-    overflow-y: auto;
+
+    > .list {
+        overflow-y: auto;
+    }
 }
 
 .lang-popover-menu .popover-inner .item-title {
@@ -221,12 +226,27 @@ i.icon.la, i.icon.las, i.icon.lab {
     text-overflow: ellipsis;
 }
 
-.settings-list .item-inner > .item-after {
+.settings-list .item-truncate-after-text .item-inner {
-    max-width: 70%;
+    > .item-actual-title {
-    overflow: hidden;
+        display: flex;
-    text-overflow: ellipsis;
+        flex-shrink: 0;
-    position: relative;
+        max-width: 80%;
-    display: block;
+
+        > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    > .item-after {
+        display: block;
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 70%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: relative;
+    }
 }
 
 .login-page-fixed-bottom {
@@ -289,14 +309,29 @@ html[dir="rtl"] i.icon.icon-with-direction {
     margin-inline-start: 0;
 }
 
+.navbar > .navbar-inner > .navbar-hidden-icon.right {
+    box-shadow: inherit;
+    background-color: inherit;
+}
+
+.toolbar-inner {
+    gap: 2px !important;
+
+    > .link {
+        padding: 0 !important;
+    }
+}
+
 .toolbar-item-auto-size .toolbar-inner {
     padding-inline-start: 16px;
     padding-inline-end: 16px;
-    gap: 4px;
+    justify-content: space-between;
+    gap: 4px !important;
 }
 
 .toolbar-item-auto-size .toolbar-inner > .link {
     width: auto;
+    min-width: 28px !important;
 }
 
 .tabbar-primary-link,
@@ -337,10 +372,12 @@ html[dir="rtl"] i.icon.icon-with-direction {
     text-overflow: ellipsis;
 }
 
-.list .item-content .input.list-title-input {
+.list .editing-list-item .item-content .item-inner {
-    margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
+    padding-top: 5px;
-    margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
+    padding-bottom: 7px;
+}
 
+.list .item-content .input.list-title-input {
     > input.input-with-value {
         font-size: var(--f7-list-item-title-font-size);
     }
@@ -728,6 +765,18 @@ html[dir="rtl"] .combination-list-wrapper .list.combination-list-header .combina
 }
 
 /** Fix @vuepic/vue-datepicker style issue **/
+.dp__theme_light {
+    --dp-background-color: inherit;
+    --dp-border-color: #aaa;
+    --dp-menu-border-color: #aaa;
+}
+
+.dp__theme_dark {
+    --dp-background-color: inherit;
+    --dp-border-color: #555;
+    --dp-menu-border-color: #555;
+}
+
 .dp__main.dp__flex_display {
     flex-direction: column;
 }

src/views/mobile/AboutPage.vue

@@ -3,7 +3,7 @@
         <f7-navbar>
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('About')"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right :class="{ 'navbar-hidden-icon': clientVersionMatchServerVersion && !forceShowRefreshBrowserCacheMenu }">
                 <f7-link icon-f7="" v-if="clientVersionMatchServerVersion && !forceShowRefreshBrowserCacheMenu"/>
                 <f7-link icon-f7="ellipsis" @click="showRefreshBrowserCacheSheet = true"
                          v-else-if="!clientVersionMatchServerVersion || forceShowRefreshBrowserCacheMenu"></f7-link>
@@ -34,13 +34,13 @@
             <f7-list-item :title="tt('Provider')" :after="mapProviderName" v-if="!mapProviderWebsite"></f7-list-item>
         </f7-list>
 
-        <f7-popup push with-subnavbar swipe-to-close swipe-handler=".swipe-handler" class="license-popup">
+        <f7-popup push swipe-to-close swipe-handler=".swipe-handler" class="license-popup">
             <f7-page>
                 <f7-navbar>
                     <div class="swipe-handler" style="z-index: 10"></div>
-                    <f7-subnavbar :title="tt('License') "></f7-subnavbar>
+                    <f7-nav-title class="license-title">{{ tt('License') }}</f7-nav-title>
                 </f7-navbar>
-                <f7-block strong outline class="license-content">
+                <f7-block strong outline class="license-content no-margin-top">
                     <p>
                         <span :key="num" v-for="(line, num) in licenseLines"
                               :style="{ 'display': line ? 'initial' : 'block', 'padding' : line ? '0' : '0 0 1em 0' }">
@@ -120,16 +120,9 @@ init();
 </script>
 
 <style>
-.license-popup .navbar-bg {
+.license-popup .license-title {
-    background-color: rgb(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
+    margin-top: 26px;
-}
+    font-size: var(--ebk-license-popup-title-font-size);
-
-.license-popup .subnavbar {
-    background-color: rgb(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
-}
-
-.license-popup .subnavbar-title {
-    --f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
 }
 
 .license-content {

src/views/mobile/HomePage.vue

@@ -4,7 +4,7 @@
             <f7-nav-title :title="tt('global.app.title')"></f7-nav-title>
         </f7-navbar>
 
-        <f7-card class="home-summary-card" :class="{ 'skeleton-text': loading }">
+        <f7-card class="home-summary-card no-margin-top" :class="{ 'skeleton-text': loading }">
             <f7-card-header class="display-block" style="padding-top: 120px;">
                 <p class="no-margin">
                     <span class="card-header-content" v-if="loading">
@@ -21,7 +21,7 @@
                 <p class="no-margin">
                     <span class="month-expense" v-if="loading">0.00 USD</span>
                     <span class="month-expense" v-else-if="!loading">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}</span>
-                    <f7-link class="margin-inline-start-half" @click="showAmountInHomePage = !showAmountInHomePage">
+                    <f7-link class="display-inline-flex margin-inline-start-half" @click="showAmountInHomePage = !showAmountInHomePage">
                         <f7-icon class="ebk-hide-icon" :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
                     </f7-link>
                 </p>
@@ -438,8 +438,11 @@ init();
     line-height: var(--ebk-big-icon-button-size);
 }
 
-.template-popover-menu .popover-inner{
+.template-popover-menu .popover-inner {
     max-height: 400px;
-    overflow-y: auto;
+
+    > .list {
+        overflow-y: auto;
+    }
 }
 </style>

src/views/mobile/SettingsPage.vue

@@ -62,13 +62,21 @@
             <f7-list-item :title="tt('Exchange Rates Data')" :after="exchangeRatesLastUpdateDate" link="/exchange_rates"></f7-list-item>
 
             <f7-list-item>
-                <span>{{ tt('Auto-update Exchange Rates Data') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="isAutoUpdateExchangeRatesData" @toggle:change="isAutoUpdateExchangeRatesData = $event"></f7-toggle>
+                    {{ tt('Auto-update Exchange Rates Data') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="isAutoUpdateExchangeRatesData" @toggle:change="isAutoUpdateExchangeRatesData = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-item>
-                <span>{{ tt('Show Account Balance') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
+                    {{ tt('Show Account Balance') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-item :title="tt('Page Settings')" link="/settings/page"></f7-list-item>
@@ -76,13 +84,21 @@
             <f7-list-item :title="tt('Settings Sync')" link="/settings/sync"></f7-list-item>
 
             <f7-list-item>
-                <span>{{ tt('Enable Swipe Back') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="isEnableSwipeBack" @toggle:change="isEnableSwipeBack = $event"></f7-toggle>
+                    {{ tt('Enable Swipe Back') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="isEnableSwipeBack" @toggle:change="isEnableSwipeBack = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-item>
-                <span>{{ tt('Enable Animation') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
+                    {{ tt('Enable Animation') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-item link="#" no-chevron :title="tt('Switch to Desktop Version')" @click="switchToDesktopVersion"></f7-list-item>

src/views/mobile/accounts/ListPage.vue

@@ -19,7 +19,7 @@
                 <p class="no-margin">
                     <span class="net-assets" v-if="loading">0.00 USD</span>
                     <span class="net-assets" v-else-if="!loading">{{ netAssets }}</span>
-                    <f7-link class="margin-inline-start-half" @click="showAccountBalance = !showAccountBalance">
+                    <f7-link class="display-inline-flex margin-inline-start-half" @click="showAccountBalance = !showAccountBalance">
                         <f7-icon class="ebk-hide-icon" :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
                     </f7-link>
                 </p>

src/views/mobile/settings/PageSettingsPage.vue

@@ -5,16 +5,27 @@
         <f7-block-title class="margin-top">{{ tt('Overview Page') }}</f7-block-title>
         <f7-list strong inset dividers class="settings-list">
             <f7-list-item>
-                <span>{{ tt('Show Amount') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
+                    {{ tt('Show Amount') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Timezone Used for Statistics')"
-                :after="findDisplayNameByType(allTimezoneTypesUsedForStatistics, timezoneUsedForStatisticsInHomePage)"
                 @click="showTimezoneUsedForStatisticsInHomePagePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Timezone Used for Statistics') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allTimezoneTypesUsedForStatistics, timezoneUsedForStatisticsInHomePage) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"
@@ -28,21 +39,33 @@
                 </list-item-selection-popup>
             </f7-list-item>
 
-            <f7-list-item :disabled="!hasAnyAccount"
+            <f7-list-item
-                          :title="tt('Accounts Included in Overview Statistics')"
+                class="item-truncate-after-text"
-                          link="/settings/filter/account?type=homePageOverview">
+                link="/settings/filter/account?type=homePageOverview"
+                :disabled="!hasAnyAccount">
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Accounts Included in Overview Statistics') }}</span>
+                    </div>
+                </template>
                 <template #after>
                     <f7-preloader v-if="loadingAccounts" />
-                    <span v-else-if="!loadingAccounts">{{ accountsIncludedInHomePageOverviewDisplayContent }}</span>
+                    <div v-else-if="!loadingAccounts">{{ accountsIncludedInHomePageOverviewDisplayContent }}</div>
                 </template>
             </f7-list-item>
 
-            <f7-list-item :disabled="!hasAnyTransactionCategory"
+            <f7-list-item
-                          :title="tt('Transaction Categories Included in Overview Statistics')"
+                class="item-truncate-after-text"
-                          :link="`/settings/filter/category?type=homePageOverview&allowCategoryTypes=${CategoryType.Income},${CategoryType.Expense}`">
+                :disabled="!hasAnyTransactionCategory"
+                :link="`/settings/filter/category?type=homePageOverview&allowCategoryTypes=${CategoryType.Income},${CategoryType.Expense}`">
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Transaction Categories Included in Overview Statistics') }}</span>
+                    </div>
+                </template>
                 <template #after>
                     <f7-preloader v-if="loadingTransactionCategories" />
-                    <span v-else-if="!loadingTransactionCategories">{{ transactionCategoriesIncludedInHomePageOverviewDisplayContent }}</span>
+                    <div v-else-if="!loadingTransactionCategories">{{ transactionCategoriesIncludedInHomePageOverviewDisplayContent }}</div>
                 </template>
             </f7-list-item>
         </f7-list>
@@ -50,23 +73,38 @@
         <f7-block-title>{{ tt('Transaction List Page') }}</f7-block-title>
         <f7-list strong inset dividers>
             <f7-list-item>
-                <span>{{ tt('Show Monthly Total Amount') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="showTotalAmountInTransactionListPage" @toggle:change="showTotalAmountInTransactionListPage = $event"></f7-toggle>
+                    {{ tt('Show Monthly Total Amount') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="showTotalAmountInTransactionListPage" @toggle:change="showTotalAmountInTransactionListPage = $event"></f7-toggle>
+                </template>
             </f7-list-item>
             <f7-list-item>
-                <span>{{ tt('Show Transaction Tag') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="showTagInTransactionListPage" @toggle:change="showTagInTransactionListPage = $event"></f7-toggle>
+                    {{ tt('Show Transaction Tag') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="showTagInTransactionListPage" @toggle:change="showTagInTransactionListPage = $event"></f7-toggle>
+                </template>
             </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ tt('Transaction Edit Page') }}</f7-block-title>
         <f7-list strong inset dividers>
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Automatically Save Draft')"
-                :after="findNameByValue(allAutoSaveTransactionDraftTypes, autoSaveTransactionDraft)"
                 @click="showAutoSaveTransactionDraftPopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Automatically Save Draft') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findNameByValue(allAutoSaveTransactionDraftTypes, autoSaveTransactionDraft) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="value" value-field="value"
                                            title-field="name"
@@ -81,24 +119,38 @@
             </f7-list-item>
 
             <f7-list-item>
-                <span>{{ tt('Automatically Add Geolocation') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
+                    {{ tt('Automatically Add Geolocation') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
+                </template>
             </f7-list-item>
 
             <f7-list-item>
-                <span>{{ tt('Always Show Transaction Pictures') }}</span>
+                <template #after-title>
-                <f7-toggle :checked="alwaysShowTransactionPicturesInMobileTransactionEditPage" @toggle:change="alwaysShowTransactionPicturesInMobileTransactionEditPage = $event"></f7-toggle>
+                    {{ tt('Always Show Transaction Pictures') }}
+                </template>
+                <template #after>
+                    <f7-toggle :checked="alwaysShowTransactionPicturesInMobileTransactionEditPage" @toggle:change="alwaysShowTransactionPicturesInMobileTransactionEditPage = $event"></f7-toggle>
+                </template>
             </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ tt('Account List Page') }}</f7-block-title>
         <f7-list strong inset dividers>
-            <f7-list-item :disabled="!hasAnyVisibleAccount"
+            <f7-list-item
-                          :title="tt('Accounts Included in Total')"
+                class="item-truncate-after-text"
-                          link="/settings/filter/account?type=accountListTotalAmount">
+                link="/settings/filter/account?type=accountListTotalAmount"
+                :disabled="!hasAnyVisibleAccount">
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Accounts Included in Total') }}</span>
+                    </div>
+                </template>
                 <template #after>
                     <f7-preloader v-if="loadingAccounts" />
-                    <span v-else-if="!loadingAccounts">{{ accountsIncludedInTotalDisplayContent }}</span>
+                    <div v-else-if="!loadingAccounts">{{ accountsIncludedInTotalDisplayContent }}</div>
                 </template>
             </f7-list-item>
         </f7-list>
@@ -106,11 +158,18 @@
         <f7-block-title>{{ tt('Exchange Rates Data Page') }}</f7-block-title>
         <f7-list strong inset dividers>
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Sort by')"
-                :after="findDisplayNameByType(allCurrencySortingTypes, currencySortByInExchangeRatesPage)"
                 @click="showCurrencySortByInExchangeRatesPagePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Sort by') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allCurrencySortingTypes, currencySortByInExchangeRatesPage) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"

src/views/mobile/statistics/SettingsPage.vue

@@ -5,11 +5,18 @@
         <f7-block-title class="margin-top">{{ tt('Common Settings') }}</f7-block-title>
         <f7-list strong inset dividers class="settings-list">
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Default Chart Data Type')"
-                :after="findDisplayNameByType(allChartDataTypes, defaultChartDataType)"
                 @click="showDefaultChartDataTypePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Default Chart Data Type') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allChartDataTypes, defaultChartDataType) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"
@@ -24,11 +31,18 @@
             </f7-list-item>
 
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Timezone Used for Date Range')"
-                :after="findDisplayNameByType(allTimezoneTypesUsedForStatistics, defaultTimezoneType)"
                 @click="showDefaultTimezoneTypePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Timezone Used for Date Range') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allTimezoneTypesUsedForStatistics, defaultTimezoneType) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"
@@ -47,11 +61,18 @@
             <f7-list-item :title="tt('Default Transaction Category Filter')" link="/settings/filter/category?type=statisticsDefault"></f7-list-item>
 
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Default Sort Order')"
-                :after="findDisplayNameByType(allSortingTypes, defaultSortingType)"
                 @click="showDefaultSortingTypePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Default Sort Order') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allSortingTypes, defaultSortingType) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"
@@ -67,13 +88,20 @@
         </f7-list>
 
         <f7-block-title>{{ tt('Categorical Analysis Settings') }}</f7-block-title>
-        <f7-list strong inset dividers>
+        <f7-list strong inset dividers class="settings-list">
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Default Chart Type')"
-                :after="findDisplayNameByType(allCategoricalChartTypes, defaultCategoricalChartType)"
                 @click="showDefaultCategoricalChartTypePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Default Chart Type') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allCategoricalChartTypes, defaultCategoricalChartType) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"
@@ -88,11 +116,18 @@
             </f7-list-item>
 
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Default Date Range')"
-                :after="findDisplayNameByType(allCategoricalChartDateRanges, defaultCategoricalChartDateRange)"
                 @click="showDefaultCategoricalChartDateRangePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Default Date Range') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allCategoricalChartDateRanges, defaultCategoricalChartDateRange) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"
@@ -108,13 +143,20 @@
         </f7-list>
 
         <f7-block-title>{{ tt('Trend Analysis Settings') }}</f7-block-title>
-        <f7-list strong inset dividers>
+        <f7-list strong inset dividers class="settings-list">
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Default Date Range')"
-                :after="findDisplayNameByType(allTrendChartDateRanges, defaultTrendChartDateRange)"
                 @click="showDefaultTrendChartDateRangePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Default Date Range') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allTrendChartDateRanges, defaultTrendChartDateRange) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"
@@ -130,13 +172,20 @@
         </f7-list>
 
         <f7-block-title>{{ tt('Asset Trends Settings') }}</f7-block-title>
-        <f7-list strong inset dividers>
+        <f7-list strong inset dividers class="settings-list">
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Default Date Range')"
-                :after="findDisplayNameByType(allAssetTrendsChartDateRanges, defaultAssetTrendsChartDateRange)"
                 @click="showDefaultAssetTrendsChartDateRangePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Default Date Range') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allAssetTrendsChartDateRanges, defaultAssetTrendsChartDateRange) }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="type" value-field="type"
                                            title-field="displayName"

src/views/mobile/statistics/TransactionPage.vue

@@ -4,7 +4,7 @@
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title>
                 <f7-link popover-open=".chart-data-type-popover-menu">
-                    <span style="color: var(--f7-text-color)">{{ queryChartDataTypeName }}</span>
+                    <span class="statistics-page-title">{{ queryChartDataTypeName }}</span>
                     <f7-icon class="page-title-bar-icon" color="gray" style="opacity: 0.5" f7="chevron_down_circle_fill"></f7-icon>
                 </f7-link>
             </f7-nav-title>
@@ -920,6 +920,12 @@ init();
 </script>
 
 <style>
+.statistics-page-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--f7-text-color);
+}
+
 .card-header.no-border:after {
     display: none;
 }
@@ -954,8 +960,11 @@ init();
     transform: translateY(1.5em);
 }
 
-.chart-data-type-popover-menu .popover-inner{
+.chart-data-type-popover-menu .popover-inner {
     max-height: 440px;
-    overflow-y: auto;
+
+    > .list {
+        overflow-y: auto;
+    }
 }
 </style>

src/views/mobile/tags/ListPage.vue

@@ -31,7 +31,7 @@
                  :sortable-enabled="sortable" @sortable:sort="onSort"
                  v-if="!loading">
             <f7-list-item swipeout
-                          :class="{ 'actual-first-child': tag.id === firstShowingId, 'actual-last-child': tag.id === lastShowingId && !newTag }"
+                          :class="{ 'actual-first-child': tag.id === firstShowingId, 'actual-last-child': tag.id === lastShowingId && !newTag, 'editing-list-item': editingTag.id === tag.id }"
                           :id="getTagDomId(tag)"
                           :key="tag.id"
                           v-for="tag in tags"
@@ -55,7 +55,7 @@
                                   :placeholder="tt('Tag Title')"
                                   v-else-if="editingTag.id === tag.id"
                                   v-model:value="editingTag.name"
-                                  @keyup.enter="save(tag)">
+                                  @keyup.enter="save(editingTag)">
                         </f7-input>
                     </div>
                 </template>
@@ -93,7 +93,7 @@
                 </f7-swipeout-actions>
             </f7-list-item>
 
-            <f7-list-item v-if="newTag">
+            <f7-list-item class="editing-list-item" v-if="newTag">
                 <template #media>
                     <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                 </template>

src/views/mobile/transactions/EditPage.vue

@@ -9,20 +9,20 @@
             </f7-nav-right>
 
             <f7-subnavbar>
-                <f7-segmented strong :class="{ 'readonly': pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add }">
+                <f7-segmented strong round :class="{ 'readonly': pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add }">
-                    <f7-button :text="tt('Expense')" :active="transaction.type === TransactionType.Expense"
+                    <f7-button round :text="tt('Expense')" :active="transaction.type === TransactionType.Expense"
                                :disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Expense"
                                v-if="transaction.type !== TransactionType.ModifyBalance"
                                @click="transaction.type = TransactionType.Expense"></f7-button>
-                    <f7-button :text="tt('Income')" :active="transaction.type === TransactionType.Income"
+                    <f7-button round :text="tt('Income')" :active="transaction.type === TransactionType.Income"
                                :disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Income"
                                v-if="transaction.type !== TransactionType.ModifyBalance"
                                @click="transaction.type = TransactionType.Income"></f7-button>
-                    <f7-button :text="tt('Transfer')" :active="transaction.type === TransactionType.Transfer"
+                    <f7-button round :text="tt('Transfer')" :active="transaction.type === TransactionType.Transfer"
                                :disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Transfer"
                                v-if="transaction.type !== TransactionType.ModifyBalance"
                                @click="transaction.type = TransactionType.Transfer"></f7-button>
-                    <f7-button :text="tt('Modify Balance')" :active="transaction.type === TransactionType.ModifyBalance"
+                    <f7-button round :text="tt('Modify Balance')" :active="transaction.type === TransactionType.ModifyBalance"
                                v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction && transaction.type === TransactionType.ModifyBalance"></f7-button>
                 </f7-segmented>
             </f7-subnavbar>

src/views/mobile/transactions/ListPage.vue

@@ -1572,9 +1572,17 @@ html[dir="rtl"] .list.transaction-info-list li.transaction-info .transaction-foo
 .date-popover-menu .popover-inner,
 .category-popover-menu .popover-inner,
 .account-popover-menu .popover-inner,
-.more-popover-menu .popover-inner{
+.more-popover-menu .popover-inner {
     max-height: 400px;
-    overflow-y: auto;
+
+    > .list {
+        overflow-y: auto;
+    }
+}
+
+.transaction-calendar-container .dp__theme_light,
+.transaction-calendar-container .dp__theme_dark {
+    --dp-background-color: var(--f7-list-strong-bg-color);
 }
 
 .transaction-calendar-container .dp__main .dp__menu {