From 87a21a1a4fbab40de33d4f7c7af87ab98e3d480b Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 4 Nov 2025 00:33:41 +0800
Subject: [PATCH] language selector on the login and unlock page is displayed
 at the bottom

---
 src/components/mobile/LanguageSelectButton.vue |  9 ++++++++-
 src/styles/mobile/global.scss                  |  1 +
 src/views/mobile/LoginPage.vue                 | 10 ++++++----
 src/views/mobile/UnlockPage.vue                | 10 ++++++----
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/mobile/LanguageSelectButton.vue b/src/components/mobile/LanguageSelectButton.vue
index d5250baa..160154cd 100644
--- a/src/components/mobile/LanguageSelectButton.vue
+++ b/src/components/mobile/LanguageSelectButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <f7-button small popover-open=".lang-popover-menu" :disabled="disabled" :text="currentLanguageName"></f7-button>
+    <f7-button class="language-select-button" small popover-open=".lang-popover-menu" :disabled="disabled" :text="currentLanguageName"></f7-button>
 
     <f7-popover class="lang-popover-menu">
         <f7-list dividers>
@@ -30,3 +30,10 @@ const {
     isLanguageSelected
 } = useLanguageSelectButtonBase(props, emit);
 </script>
+
+<style>
+.language-select-button {
+    display: initial;
+    padding: 8px 10px 8px 10px;
+}
+</style>
diff --git a/src/styles/mobile/global.scss b/src/styles/mobile/global.scss
index 4af63c6f..b91ab599 100644
--- a/src/styles/mobile/global.scss
+++ b/src/styles/mobile/global.scss
@@ -230,6 +230,7 @@ i.icon.la, i.icon.las, i.icon.lab {
 }
 
 .login-page-fixed-bottom {
+    height: calc(80px + var(--f7-safe-area-bottom));
     background-color: inherit !important;
 }
 
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index 0bfc1b64..5ce66a9d 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -66,11 +66,11 @@
             </f7-block-footer>
         </f7-list>
 
-        <language-select-button :disabled="loggingInByPassword || loggingInByOAuth2" />
-
         <f7-list class="login-page-bottom">
             <f7-block-footer>
-                <div class="login-page-powered-by">
+                <language-select-button :disabled="loggingInByPassword || loggingInByOAuth2" />
+
+                <div class="login-page-powered-by margin-top-half">
                     <span>Powered by</span>
                     <f7-link external href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</f7-link>
                     <span>{{ version }}</span>
@@ -79,7 +79,9 @@
         </f7-list>
 
         <f7-toolbar class="login-page-fixed-bottom" tabbar bottom :outline="false">
-            <div class="login-page-powered-by">
+            <language-select-button :disabled="loggingInByPassword || loggingInByOAuth2" />
+
+            <div class="login-page-powered-by margin-top-half">
                 <span>Powered by</span>
                 <f7-link external href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</f7-link>
                 <span>{{ version }}</span>
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index ddc1d35a..ff72669c 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/src/views/mobile/UnlockPage.vue
@@ -26,11 +26,11 @@
             </f7-block-footer>
         </f7-list>
 
-        <language-select-button />
-
         <f7-list class="login-page-bottom">
             <f7-block-footer>
-                <div class="login-page-powered-by">
+                <language-select-button />
+
+                <div class="login-page-powered-by margin-top-half">
                     <span>Powered by</span>
                     <f7-link external href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</f7-link>
                     <span>{{ version }}</span>
@@ -39,7 +39,9 @@
         </f7-list>
 
         <f7-toolbar class="login-page-fixed-bottom" tabbar bottom :outline="false">
-            <div class="login-page-powered-by">
+            <language-select-button />
+
+            <div class="login-page-powered-by margin-top-half">
                 <span>Powered by</span>
                 <f7-link external href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</f7-link>
                 <span>{{ version }}</span>