fix some content exceeds the screen in landscape mode

mayswind · Feb 11, 2025 · 13cc6a2 · 13cc6a2
1 parent 35ba5dc
commit 13cc6a2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -234,17 +234,24 @@ function onSheetClosed(): void {
 </script>
 
 <style>
+.tag-selection-default-sheet {
+    height: 200px;
+}
+
 @media (min-height: 630px) {
-    .tag-selection-default-sheet {
-        height: 200px;
+    .tag-selection-large-sheet {
+        height: 260px;
     }
 
-    .tag-selection-large-sheet {
-        height: 250px;
+    .tag-selection-huge-sheet {
+        height: 380px;
     }
+}
 
+@media (max-height: 629px) {
+    .tag-selection-large-sheet,
     .tag-selection-huge-sheet {
-        height: 340px;
+        height: 240px;
     }
 }
 

diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -145,17 +145,24 @@ function onSheetClosed(): void {
 </script>
 
 <style>
+.tree-view-selection-default-sheet {
+    height: 200px;
+}
+
 @media (min-height: 630px) {
-    .tree-view-selection-default-sheet {
-        height: 200px;
+    .tree-view-selection-large-sheet {
+        height: 260px;
     }
 
-    .tree-view-selection-large-sheet {
-        height: 250px;
+    .tree-view-selection-huge-sheet {
+        height: 380px;
     }
+}
 
+@media (max-height: 629px) {
+    .tree-view-selection-large-sheet,
     .tree-view-selection-huge-sheet {
-        height: 340px;
+        height: 240px;
     }
 }
 </style>
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -147,6 +147,12 @@ function onSheetClosed(): void {
     overflow-y: auto;
 }
 
+@media (max-height: 629px) {
+    .primary-list-container, .secondary-list-container {
+        height: 240px;
+    }
+}
+
 .primary-list.list .item-inner {
     padding-right: 6px;
 }