fix: Adjust mobile itemSize for virtual scrolling

hayden-fr · Nov 2, 2024 · 599ac92 · 599ac92
1 parent 274a598
commit 599ac92
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/DialogManager.vue b/src/components/DialogManager.vue
@@ -41,7 +41,7 @@
 
     <ResponseScroll
       :items="list"
-      :itemSize="cardWidth / aspect + gutter"
+      :itemSize="itemSize"
       :row-key="(item) => item.map(genModelKey).join(',')"
       class="h-full flex-1"
     >
@@ -120,6 +120,17 @@ const sortOrderOptions = ref(
   }),
 )
 
+const itemSize = computed(() => {
+  let itemWidth = cardWidth
+  let itemGutter = gutter
+  if (isMobile.value) {
+    const baseSize = 16
+    itemWidth = window.innerWidth - baseSize * 2 * 2
+    itemGutter = baseSize * 2
+  }
+  return itemWidth / aspect + itemGutter
+})
+
 const colSpan = ref(1)
 const colSpanWidth = ref(cardWidth)