update sheet height

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>

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 {

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>

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>

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);
 }

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;
     }
 }
 

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>