From 5850e0e29838f014121b60a7d071118a6a18ebdf Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 6 Dec 2025 00:44:27 +0800
Subject: [PATCH] update sheet height

---
 src/components/common/MapView.vue               |  8 +++++++-
 .../mobile/AIImageRecognitionSheet.vue          | 15 ++++++++++++---
 src/components/mobile/IconSelectionSheet.vue    | 17 ++++++++++++++---
 .../mobile/ListItemSelectionSheet.vue           | 17 ++++++++++++++---
 src/components/mobile/MapSheet.vue              | 10 +++++++++-
 .../mobile/TransactionTagSelectionSheet.vue     |  2 +-
 .../mobile/TreeViewSelectionSheet.vue           |  2 +-
 7 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/components/common/MapView.vue b/src/components/common/MapView.vue
index aee1dd8a..8d5d3d25 100644
--- a/src/components/common/MapView.vue
+++ b/src/components/common/MapView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="mapContainer" style="width: 100%" :class="mapClass" :style="finalMapStyle"></div>
+    <div ref="mapContainer" :class="'map-view-container' + (mapClass ? ` ${mapClass}` : '')" :style="finalMapStyle"></div>
     <slot name="error-title"
           :mapSupported="mapSupported" :mapDependencyLoaded="mapDependencyLoaded"
           v-if="!mapSupported || !mapDependencyLoaded"></slot>
@@ -175,3 +175,9 @@ defineExpose({
     zoomOut
 });
 </script>
+
+<style>
+.map-view-container {
+    width: 100%;
+}
+</style>
diff --git a/src/components/mobile/AIImageRecognitionSheet.vue b/src/components/mobile/AIImageRecognitionSheet.vue
index eb1aca17..1d8b3b3d 100644
--- a/src/components/mobile/AIImageRecognitionSheet.vue
+++ b/src/components/mobile/AIImageRecognitionSheet.vue
@@ -14,9 +14,8 @@
             </div>
         </f7-toolbar>
         <f7-page-content class="no-margin-vertical no-padding-vertical">
-            <div class="image-container display-flex justify-content-center"
-                 style="height: 400px" @click="showOpenImage">
-                <img height="400px" :src="imageSrc" v-if="imageSrc" />
+            <div class="image-container display-flex justify-content-center" @click="showOpenImage">
+                <img :src="imageSrc" v-if="imageSrc" />
                 <div class="image-container-background display-flex justify-content-center align-items-center text-align-center padding-horizontal" v-if="!imageSrc">
                     <div class="display-inline-flex flex-direction-column" v-if="!loading">
                         <span>{{ tt('Click here to select a receipt or transaction image') }}</span>
@@ -189,7 +188,17 @@ function onSheetClosed(): void {
 
 <style>
 .image-container {
+    --ebk-ai-image-recognition-height: 310px;
+    height: var(--ebk-ai-image-recognition-height);
     border: 1px solid var(--f7-page-master-border-color);
+
+    > img {
+        height: var(--ebk-ai-image-recognition-height);
+    }
+
+    @media (min-height: 630px) {
+        --ebk-ai-image-recognition-height: 525px;
+    }
 }
 
 .image-container-background {
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index a89e9f6d..25dfcbce 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -59,7 +59,7 @@ const heightClass = computed<string>(() => {
     } else if (allIconRows.value.length > 6) {
         return 'icon-selection-large-sheet';
     } else {
-        return '';
+        return 'icon-selection-default-sheet';
     }
 });
 
@@ -82,13 +82,24 @@ function onSheetClosed(): void {
 </script>
 
 <style>
+.icon-selection-default-sheet {
+    height: 310px;
+}
+
 @media (min-height: 630px) {
     .icon-selection-large-sheet {
-        height: 310px;
+        height: 370px;
     }
 
     .icon-selection-huge-sheet {
-        height: 400px;
+        height: 500px;
+    }
+}
+
+@media (max-height: 629px) {
+    .icon-selection-large-sheet,
+    .icon-selection-huge-sheet {
+        height: 320px;
     }
 }
 </style>
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index 87e0ca45..4eeedb47 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -70,7 +70,7 @@ const heightClass = computed<string>(() => {
     } else if (props.items.length > 6) {
         return 'list-item-selection-large-sheet';
     } else {
-        return '';
+        return 'list-item-selection-default-sheet';
     }
 });
 
@@ -126,13 +126,24 @@ function onSheetClosed(): void {
 </script>
 
 <style>
+.list-item-selection-default-sheet {
+    height: 310px;
+}
+
 @media (min-height: 630px) {
     .list-item-selection-large-sheet {
-        height: 310px;
+        height: 370px;
     }
 
     .list-item-selection-huge-sheet {
-        height: 400px;
+        height: 500px;
+    }
+}
+
+@media (max-height: 629px) {
+    .list-item-selection-large-sheet,
+    .list-item-selection-huge-sheet {
+        height: 320px;
     }
 }
 </style>
diff --git a/src/components/mobile/MapSheet.vue b/src/components/mobile/MapSheet.vue
index c7a3dfd9..673e87d4 100644
--- a/src/components/mobile/MapSheet.vue
+++ b/src/components/mobile/MapSheet.vue
@@ -13,7 +13,7 @@
             </div>
         </f7-toolbar>
         <f7-page-content class="no-margin no-padding">
-            <map-view ref="map" height="400px"
+            <map-view ref="map" height="var(--ebk-map-sheet-height)"
                       :enable-zoom-control="false" :geo-location="geoLocation"
                       @click="updateSpecifiedGeoLocation">
                 <template #error-title="{ mapSupported, mapDependencyLoaded }">
@@ -101,6 +101,14 @@ function onSheetClosed(): void {
 </script>
 
 <style>
+.map-sheet .map-view-container {
+    --ebk-map-sheet-height: 310px;
+
+    @media (min-height: 630px) {
+        --ebk-map-sheet-height: 500px;
+    }
+}
+
 .map-sheet .map-sheet-error-title {
     margin-top: var(--f7-toolbar-height);
 }
diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
index 65634bc8..5b81270d 100644
--- a/src/components/mobile/TransactionTagSelectionSheet.vue
+++ b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -257,7 +257,7 @@ function onSheetClosed(): void {
 @media (max-height: 629px) {
     .tag-selection-large-sheet,
     .tag-selection-huge-sheet {
-        height: 360px;
+        height: 320px;
     }
 }
 
diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index 257cb6a4..31bc3bb8 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -165,7 +165,7 @@ function onSheetClosed(): void {
 @media (max-height: 629px) {
     .tree-view-selection-large-sheet,
     .tree-view-selection-huge-sheet {
-        height: 360px;
+        height: 320px;
     }
 }
 </style>