From 931d5e8395510641bb670349ac85e5f7ec96aca2 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 20 Dec 2025 22:15:45 +0800
Subject: [PATCH] show ellipsis when the time zone text is too long

---
 src/views/mobile/SettingsPage.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/views/mobile/SettingsPage.vue b/src/views/mobile/SettingsPage.vue
index 765d2756..6224894b 100644
--- a/src/views/mobile/SettingsPage.vue
+++ b/src/views/mobile/SettingsPage.vue
@@ -39,11 +39,18 @@
             <f7-list-item :title="tt('Text Size')" link="/settings/textsize"></f7-list-item>
 
             <f7-list-item
+                class="item-truncate-after-text"
                 link="#"
-                :title="tt('Timezone')"
-                :after="currentTimezoneName"
                 @click="showTimezonePopup = true"
             >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Timezone') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ currentTimezoneName }}
+                </template>
                 <list-item-selection-popup value-type="item"
                                            key-field="name" value-field="name"
                                            title-field="displayNameWithUtcOffset"