From e84cfb3bb51d52831d2f2764bf3bb2240e76a458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Korde=C5=BE?= <jakobkordez1999@gmail.com>
Date: Thu, 23 May 2024 20:28:51 +0200
Subject: [PATCH 01/11] Optimize quick overview with virtual list

---
 packages/client/internals/QuickOverview.vue | 94 +++++++++++++--------
 1 file changed, 59 insertions(+), 35 deletions(-)

diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 7b5adaa9f5..902ef64fa8 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, useVirtualList } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
+import { slideAspect } from '../env'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
@@ -41,10 +42,29 @@ const cardWidth = computed(() => {
   return 300
 })
 
+const cardHeight = computed(() => cardWidth.value / slideAspect.value)
+
 const rowCount = computed(() => {
-  return Math.floor((windowSize.width.value - padding) / (cardWidth.value + gap))
+  return Math.floor((windowSize.width.value - padding) / (cardWidth.value + 2 * gap))
+})
+
+const numOfRows = computed(() => {
+  return Math.ceil(slides.value.length / rowCount.value)
+})
+
+const slideRows = computed(() => {
+  return [...Array(numOfRows.value)].map((_, i) => ({ rowIdx: i, slides: slides.value.slice(i * rowCount.value, (i + 1) * rowCount.value).map((route, j) => ({ route, idx: i * rowCount.value + j })) }))
 })
 
+const { list: vList, containerProps, wrapperProps } = useVirtualList(
+  slideRows,
+  {
+    itemHeight: cardHeight.value + gap,
+    itemWidth: (cardWidth.value + gap) * rowCount.value,
+    overscan: 3,
+  },
+)
+
 const keyboardBuffer = ref<string>('')
 
 useEventListener('keypress', (e) => {
@@ -114,47 +134,51 @@ setTimeout(() => {
     <div
       v-if="showOverview || activeSlidesLoaded"
       v-show="showOverview"
+      v-bind="containerProps"
       class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
       @click="close"
     >
-      <div
-        class="grid gap-y-4 gap-x-8 w-full"
-        :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
-      >
+      <div v-bind="wrapperProps">
         <div
-          v-for="(route, idx) of slides"
-          :key="route.no"
-          class="relative"
+          v-for="{ data: { rowIdx, slides: row } } of vList"
+          :key="rowIdx"
+          class="flex mb-8"
         >
           <div
-            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
-            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
-            @click="go(route.no)"
+            v-for="{ route, idx } of row"
+            :key="route.no"
+            class="relative flex-1"
           >
-            <SlideContainer
-              :key="route.no"
-              :width="cardWidth"
-              class="pointer-events-none"
+            <div
+              class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+              :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
+              @click="go(route.no)"
             >
-              <SlideWrapper
-                :clicks-context="createFixedClicks(route, CLICKS_MAX)"
-                :route="route"
-                render-context="overview"
-              />
-              <DrawingPreview :page="route.no" />
-            </SlideContainer>
-          </div>
-          <div
-            class="absolute top-0"
-            :style="`left: ${cardWidth + 5}px`"
-          >
-            <template v-if="keyboardBuffer && String(idx + 1).startsWith(keyboardBuffer)">
-              <span class="text-green font-bold">{{ keyboardBuffer }}</span>
-              <span class="opacity-50">{{ String(idx + 1).slice(keyboardBuffer.length) }}</span>
-            </template>
-            <span v-else class="opacity-50">
-              {{ idx + 1 }}
-            </span>
+              <SlideContainer
+                :key="route.no"
+                :width="cardWidth"
+                class="pointer-events-none"
+              >
+                <SlideWrapper
+                  :clicks-context="createFixedClicks(route, CLICKS_MAX)"
+                  :route="route"
+                  render-context="overview"
+                />
+                <DrawingPreview :page="route.no" />
+              </SlideContainer>
+            </div>
+            <div
+              class="absolute top-0"
+              :style="`left: ${cardWidth + 5}px`"
+            >
+              <template v-if="keyboardBuffer && String(idx + 1).startsWith(keyboardBuffer)">
+                <span class="text-green font-bold">{{ keyboardBuffer }}</span>
+                <span class="opacity-50">{{ String(idx + 1).slice(keyboardBuffer.length) }}</span>
+              </template>
+              <span v-else class="opacity-50">
+                {{ idx + 1 }}
+              </span>
+            </div>
           </div>
         </div>
       </div>

From 2b7b13f2a836a0992bd85d0cda71c1513723a607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Korde=C5=BE?= <jakobkordez1999@gmail.com>
Date: Fri, 24 May 2024 09:56:45 +0200
Subject: [PATCH 02/11] Cleanup code

---
 packages/client/internals/QuickOverview.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 902ef64fa8..0233e882ab 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -53,7 +53,13 @@ const numOfRows = computed(() => {
 })
 
 const slideRows = computed(() => {
-  return [...Array(numOfRows.value)].map((_, i) => ({ rowIdx: i, slides: slides.value.slice(i * rowCount.value, (i + 1) * rowCount.value).map((route, j) => ({ route, idx: i * rowCount.value + j })) }))
+  const cols = rowCount.value
+  const slideRows = []
+  for (let i = 0; i < numOfRows.value; i++) {
+    const row = slides.value.slice(i * cols, (i + 1) * cols)
+    slideRows.push(row.map((route, j) => ({ route, idx: i * cols + j })))
+  }
+  return slideRows
 })
 
 const { list: vList, containerProps, wrapperProps } = useVirtualList(
@@ -140,7 +146,7 @@ setTimeout(() => {
     >
       <div v-bind="wrapperProps">
         <div
-          v-for="{ data: { rowIdx, slides: row } } of vList"
+          v-for="{ index: rowIdx, data: row } of vList"
           :key="rowIdx"
           class="flex mb-8"
         >

From de0e93f1525a94762e7bccd53b5c19293a449260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Korde=C5=BE?= <jakobkordez1999@gmail.com>
Date: Fri, 24 May 2024 09:58:10 +0200
Subject: [PATCH 03/11] Fix mistype

---
 packages/client/pages/overview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 0d2b80a383..e90ab18cb2 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -122,7 +122,7 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <div p2 border="t main">
+      <div class="p2 border-t border-main">
         <IconButton
           v-if="!isColorSchemaConfigured"
           :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"

From 5ce2ec14ee15cd114ce6ae4ca40daabaf8fb7574 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Korde=C5=BE?= <jakobkordez1999@gmail.com>
Date: Fri, 24 May 2024 09:59:11 +0200
Subject: [PATCH 04/11] Optimize /overview page with virtual scroll

---
 packages/client/pages/overview.vue | 165 +++++++++++++++--------------
 1 file changed, 87 insertions(+), 78 deletions(-)

diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index e90ab18cb2..224f6eec69 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -2,7 +2,8 @@
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { slidesTitle } from '../env'
+import { useVirtualList } from '@vueuse/core'
+import { slideAspect, slidesTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -17,6 +18,8 @@ import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 
+const cardHeight = computed(() => cardWidth / slideAspect.value)
+
 useHead({ title: `Overview - ${slidesTitle}` })
 
 const { openInEditor, slides } = useNav()
@@ -28,6 +31,13 @@ const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
+const { list: vList, containerProps, wrapperProps, scrollTo: scrollToSlide } = useVirtualList(
+  slides,
+  {
+    itemHeight: cardHeight.value,
+  },
+)
+
 const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
 function getClicksContext(route: SlideRoute) {
   // We create a local clicks context to calculate the total clicks of the slide
@@ -45,6 +55,8 @@ function wordCount(str: string) {
 }
 
 function isElementInViewport(el: HTMLElement) {
+  if (!el)
+    return false
   const rect = el.getBoundingClientRect()
   const delta = 20
   return (
@@ -72,12 +84,6 @@ function openSlideInNewTab(path: string) {
   a.click()
 }
 
-function scrollToSlide(idx: number) {
-  const el = blocks.get(idx)
-  if (el)
-    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-}
-
 function onMarkerClick(e: MouseEvent, clicks: number, route: SlideRoute) {
   const ctx = getClicksContext(route)
   if (ctx.current === clicks)
@@ -136,85 +142,88 @@ onMounted(() => {
     <main
       class="flex-1 h-full of-auto"
       :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      v-bind="containerProps"
       @scroll="checkActiveBlocks"
     >
-      <div
-        v-for="(route, idx) of slides"
-        :key="route.no"
-        :ref="el => blocks.set(idx, el as any)"
-        class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
-        :class="idx === 0 ? 'pt5' : ''"
-      >
-        <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
-          <div class="text-3xl op20 mb2">
-            {{ idx + 1 }}
+      <div v-bind="wrapperProps">
+        <div
+          v-for="{ data: route, index: idx } of vList"
+          :key="route.no"
+          :ref="el => blocks.set(idx, el as any)"
+          class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
+          :class="idx === 0 ? 'pt5' : ''"
+        >
+          <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
+            <div class="text-3xl op20 mb2">
+              {{ idx + 1 }}
+            </div>
+            <IconButton
+              class="mr--3 op0 group-hover:op80"
+              title="Play in new tab"
+              @click="openSlideInNewTab(getSlidePath(route, false))"
+            >
+              <carbon:presentation-file />
+            </IconButton>
+            <IconButton
+              v-if="route.meta?.slide"
+              class="mr--3 op0 group-hover:op80"
+              title="Open in editor"
+              @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+            >
+              <carbon:cics-program />
+            </IconButton>
           </div>
-          <IconButton
-            class="mr--3 op0 group-hover:op80"
-            title="Play in new tab"
-            @click="openSlideInNewTab(getSlidePath(route, false))"
-          >
-            <carbon:presentation-file />
-          </IconButton>
-          <IconButton
-            v-if="route.meta?.slide"
-            class="mr--3 op0 group-hover:op80"
-            title="Open in editor"
-            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
-          >
-            <carbon:cics-program />
-          </IconButton>
-        </div>
-        <div class="flex flex-col gap-2 my5">
-          <div
-            class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            @dblclick="openSlideInNewTab(getSlidePath(route, false))"
-          >
-            <SlideContainer
-              :key="route.no"
-              :width="cardWidth"
-              class="pointer-events-none important:[&_*]:select-none"
+          <div class="flex flex-col gap-2 my5">
+            <div
+              class="border rounded border-main overflow-hidden bg-main select-none h-max"
+              @dblclick="openSlideInNewTab(getSlidePath(route, false))"
+            >
+              <SlideContainer
+                :key="route.no"
+                :width="cardWidth"
+                class="pointer-events-none important:[&_*]:select-none"
+              >
+                <SlideWrapper
+                  :clicks-context="getClicksContext(route)"
+                  :route="route"
+                  render-context="overview"
+                />
+                <DrawingPreview :page="route.no" />
+              </SlideContainer>
+            </div>
+            <ClicksSlider
+              v-if="getSlideClicks(route)"
+              :clicks-context="getClicksContext(route)"
+              class="w-full mt-2"
+              @dblclick="getClicksContext(route).current = CLICKS_MAX"
+            />
+          </div>
+          <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
+            <IconButton
+              title="Edit Note"
+              class="rounded-full w-9 h-9 text-sm"
+              :class="edittingNote === route.no ? 'important:op0' : ''"
+              @click="edittingNote = route.no"
             >
-              <SlideWrapper
-                :clicks-context="getClicksContext(route)"
-                :route="route"
-                render-context="overview"
-              />
-              <DrawingPreview :page="route.no" />
-            </SlideContainer>
+              <carbon:pen />
+            </IconButton>
           </div>
-          <ClicksSlider
-            v-if="getSlideClicks(route)"
+          <NoteEditable
+            :no="route.no"
+            class="max-w-250 w-250 text-lg rounded p3"
+            :auto-height="true"
+            :editing="edittingNote === route.no"
             :clicks-context="getClicksContext(route)"
-            class="w-full mt-2"
-            @dblclick="getClicksContext(route).current = CLICKS_MAX"
+            @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"
+            @update:editing="edittingNote = null"
+            @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
           />
-        </div>
-        <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
-          <IconButton
-            title="Edit Note"
-            class="rounded-full w-9 h-9 text-sm"
-            :class="edittingNote === route.no ? 'important:op0' : ''"
-            @click="edittingNote = route.no"
+          <div
+            v-if="wordCounts[idx] > 0"
+            class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
           >
-            <carbon:pen />
-          </IconButton>
-        </div>
-        <NoteEditable
-          :no="route.no"
-          class="max-w-250 w-250 text-lg rounded p3"
-          :auto-height="true"
-          :editing="edittingNote === route.no"
-          :clicks-context="getClicksContext(route)"
-          @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"
-          @update:editing="edittingNote = null"
-          @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
-        />
-        <div
-          v-if="wordCounts[idx] > 0"
-          class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
-        >
-          {{ wordCounts[idx] }} words
+            {{ wordCounts[idx] }} words
+          </div>
         </div>
       </div>
     </main>

From 7b2aba30bb20b01f3c68b84a939f4a55a54e91d7 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 24 May 2024 19:29:04 +0800
Subject: [PATCH 05/11] chore: update

---
 packages/client/internals/QuickOverview.vue | 41 +++++++++------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 0233e882ab..9a5e39cfbe 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useEventListener, useVirtualList } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
+import type { SlideRoute } from '@slidev/types'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
@@ -23,51 +24,45 @@ function go(page: number) {
   close()
 }
 
-function focus(page: number) {
-  if (page === currentOverviewPage.value)
-    return true
-  return false
-}
-
 const xs = breakpoints.smaller('xs')
 const sm = breakpoints.smaller('sm')
 
-const padding = 4 * 16 * 2
-const gap = 2 * 16
+const paddingX = 4 * 16 * 2 // px-16
+const gapX = 2 * 16
+const gapY = 4 * 8 // mb-8
+
 const cardWidth = computed(() => {
   if (xs.value)
-    return windowSize.width.value - padding
+    return windowSize.width.value - paddingX
   else if (sm.value)
-    return (windowSize.width.value - padding - gap) / 2
+    return (windowSize.width.value - paddingX - gapX) / 2
   return 300
 })
 
 const cardHeight = computed(() => cardWidth.value / slideAspect.value)
 
-const rowCount = computed(() => {
-  return Math.floor((windowSize.width.value - padding) / (cardWidth.value + 2 * gap))
+const numOfCols = computed(() => {
+  return Math.floor((windowSize.width.value - paddingX) / (cardWidth.value + 2 * gapX))
 })
 
 const numOfRows = computed(() => {
-  return Math.ceil(slides.value.length / rowCount.value)
+  return Math.ceil(slides.value.length / numOfCols.value)
 })
 
 const slideRows = computed(() => {
-  const cols = rowCount.value
-  const slideRows = []
+  const cols = numOfCols.value
+  const rows: {route: SlideRoute, idx: number}[][] = []
   for (let i = 0; i < numOfRows.value; i++) {
     const row = slides.value.slice(i * cols, (i + 1) * cols)
-    slideRows.push(row.map((route, j) => ({ route, idx: i * cols + j })))
+    rows.push(row.map((route, j) => ({ route, idx: i * cols + j })))
   }
-  return slideRows
+  return rows
 })
 
 const { list: vList, containerProps, wrapperProps } = useVirtualList(
   slideRows,
   {
-    itemHeight: cardHeight.value + gap,
-    itemWidth: (cardWidth.value + gap) * rowCount.value,
-    overscan: 3,
+    itemHeight: cardHeight.value + gapY,
   },
 )
 
@@ -121,7 +116,7 @@ watchEffect(() => {
   // we focus on the right page.
   currentOverviewPage.value = currentSlideNo.value
   // Watch rowCount, make sure up and down shortcut work correctly.
-  overviewRowCount.value = rowCount.value
+  overviewRowCount.value = numOfCols.value
 })
 
 const activeSlidesLoaded = ref(false)
@@ -141,7 +136,7 @@ setTimeout(() => {
       v-if="showOverview || activeSlidesLoaded"
       v-show="showOverview"
       v-bind="containerProps"
-      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 px-16 py-20 overflow-y-auto backdrop-blur-5px"
       @click="close"
     >
       <div v-bind="wrapperProps">
@@ -157,7 +152,7 @@ setTimeout(() => {
           >
             <div
               class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
-              :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
+              :class="currentOverviewPage === idx + 1 ? 'border-primary' : 'border-main'"
               @click="go(route.no)"
             >
               <SlideContainer

From bf5f3f1fa39e25b41969c047a5af0e8f54128a0a Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 24 May 2024 19:31:53 +0800
Subject: [PATCH 06/11] chore: lint fix

---
 packages/client/internals/QuickOverview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 9a5e39cfbe..069875ed14 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -51,7 +51,7 @@ const numOfRows = computed(() => {
 
 const slideRows = computed(() => {
   const cols = numOfCols.value
-  const rows: {route: SlideRoute, idx: number}[][] = []
+  const rows: { route: SlideRoute, idx: number }[][] = []
   for (let i = 0; i < numOfRows.value; i++) {
     const row = slides.value.slice(i * cols, (i + 1) * cols)
     rows.push(row.map((route, j) => ({ route, idx: i * cols + j })))

From 35a898dc2946e3ca56031b36c8e62702453f40ee Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 24 May 2024 20:39:33 +0800
Subject: [PATCH 07/11] fix: QuickOverview

---
 packages/client/internals/QuickOverview.vue | 81 +++++++++++++--------
 1 file changed, 49 insertions(+), 32 deletions(-)

diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 069875ed14..7fca3aee84 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useEventListener, useVirtualList } from '@vueuse/core'
-import { computed, ref, watchEffect } from 'vue'
+import { debouncedWatch, useElementSize, useEventListener, useVirtualList } from '@vueuse/core'
+import { computed, effectScope, ref, shallowRef, watchEffect } from 'vue'
 import type { SlideRoute } from '@slidev/types'
-import { breakpoints, showOverview, windowSize } from '../state'
+import { breakpoints, showOverview } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
@@ -25,45 +25,61 @@ function go(page: number) {
 }
 
 const xs = breakpoints.smaller('xs')
-const sm = breakpoints.smaller('sm')
 
-const paddingX = 4 * 16 * 2 // px-16
 const gapX = 2 * 16
 const gapY = 4 * 8 // mb-8
 
+const containerEl = ref<HTMLElement>()
+const { width: containerWidth } = useElementSize(containerEl)
+
 const cardWidth = computed(() => {
-  if (xs.value)
-    return windowSize.width.value - paddingX
-  else if (sm.value)
-    return (windowSize.width.value - paddingX - gapX) / 2
-  return 300
+  return xs.value
+  ? containerWidth.value
+  : Math.min(300, (containerWidth.value - gapX) / 2)
 })
 
-const cardHeight = computed(() => cardWidth.value / slideAspect.value)
-
 const numOfCols = computed(() => {
-  return Math.floor((windowSize.width.value - paddingX) / (cardWidth.value + 2 * gapX))
+  return xs.value
+    ? 1
+    : Math.floor((containerWidth.value + gapX)/ (cardWidth.value + gapX))
 })
 
+const cardHeight = computed(() => cardWidth.value / slideAspect.value)
+
 const numOfRows = computed(() => {
   return Math.ceil(slides.value.length / numOfCols.value)
 })
 
+type VirtualListReturn = ReturnType<typeof useVirtualList<SlideRoute[]>>
+const virtualList = shallowRef<VirtualListReturn>()
+
 const slideRows = computed(() => {
   const cols = numOfCols.value
-  const rows: { route: SlideRoute, idx: number }[][] = []
-  for (let i = 0; i < numOfRows.value; i++) {
-    const row = slides.value.slice(i * cols, (i + 1) * cols)
-    rows.push(row.map((route, j) => ({ route, idx: i * cols + j })))
-  }
+  const rows: SlideRoute[][] = []
+  for (let i = 0; i < numOfRows.value; i++) 
+    rows.push(slides.value.slice(i * cols, (i + 1) * cols))
   return rows
 })
 
-const { list: vList, containerProps, wrapperProps } = useVirtualList(
-  slideRows,
-  {
-    itemHeight: cardHeight.value + gapY,
+// `useVirtualList`'s `itemHeight` is not reactive, so we need to re-create the virtual list when the card height changes.
+debouncedWatch(
+  cardHeight,
+  (cardHeight, _oldCardHeight, onCleanup) => {
+    const scope = effectScope()
+    scope.run(() => {
+      virtualList.value = useVirtualList(
+        slideRows,
+        {
+          itemHeight: cardHeight + gapY,
+        },
+      )
+    })
+    onCleanup(() => scope.stop())
   },
+  {
+    immediate: true,
+    debounce: 50,
+  }
 )
 
 const keyboardBuffer = ref<string>('')
@@ -135,24 +151,25 @@ setTimeout(() => {
     <div
       v-if="showOverview || activeSlidesLoaded"
       v-show="showOverview"
-      v-bind="containerProps"
+      v-bind="virtualList?.containerProps"
       class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 px-16 py-20 overflow-y-auto backdrop-blur-5px"
       @click="close"
     >
-      <div v-bind="wrapperProps">
+      <div ref="containerEl" v-bind="virtualList?.wrapperProps.value">
         <div
-          v-for="{ index: rowIdx, data: row } of vList"
+          v-for="{ index: rowIdx, data: row } of virtualList?.list.value"
           :key="rowIdx"
-          class="flex mb-8"
+          class="grid grid-rows-1 gap-x-8 w-full mb-8"
+          :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
         >
           <div
-            v-for="{ route, idx } of row"
+            v-for="route of row"
             :key="route.no"
-            class="relative flex-1"
+            class="relative"
           >
             <div
               class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
-              :class="currentOverviewPage === idx + 1 ? 'border-primary' : 'border-main'"
+              :class="currentOverviewPage === route.no ? 'border-primary' : 'border-main'"
               @click="go(route.no)"
             >
               <SlideContainer
@@ -172,12 +189,12 @@ setTimeout(() => {
               class="absolute top-0"
               :style="`left: ${cardWidth + 5}px`"
             >
-              <template v-if="keyboardBuffer && String(idx + 1).startsWith(keyboardBuffer)">
+              <template v-if="keyboardBuffer && String(route.no).startsWith(keyboardBuffer)">
                 <span class="text-green font-bold">{{ keyboardBuffer }}</span>
-                <span class="opacity-50">{{ String(idx + 1).slice(keyboardBuffer.length) }}</span>
+                <span class="opacity-50">{{ String(route.no).slice(keyboardBuffer.length) }}</span>
               </template>
               <span v-else class="opacity-50">
-                {{ idx + 1 }}
+                {{ route.no }}
               </span>
             </div>
           </div>

From 61e405da9cce90c04999dad1851226df216b9300 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 24 May 2024 21:05:56 +0800
Subject: [PATCH 08/11] fix: overview page

---
 .../composables/useDynamicVirtualList.ts      | 30 ++++++++++++++
 packages/client/internals/QuickOverview.vue   | 39 +++++--------------
 packages/client/pages/overview.vue            | 31 ++++++++-------
 3 files changed, 57 insertions(+), 43 deletions(-)
 create mode 100644 packages/client/composables/useDynamicVirtualList.ts

diff --git a/packages/client/composables/useDynamicVirtualList.ts b/packages/client/composables/useDynamicVirtualList.ts
new file mode 100644
index 0000000000..f1ac96e79a
--- /dev/null
+++ b/packages/client/composables/useDynamicVirtualList.ts
@@ -0,0 +1,30 @@
+import type { UseVirtualListOptions } from '@vueuse/core'
+import { debouncedWatch, useVirtualList } from '@vueuse/core'
+import type { MaybeRef } from 'vue'
+import { effectScope, shallowRef } from 'vue'
+
+/**
+ * `useVirtualList`'s `itemHeight` is not reactive, so we need to re-create the virtual list when the card height changes.
+ */
+export function useDynamicVirtualList<T>(list: MaybeRef<T[]>, getOptions: () => UseVirtualListOptions) {
+  type VirtualListReturn = ReturnType<typeof useVirtualList<T>>
+  const virtualList = shallowRef<VirtualListReturn>()
+  debouncedWatch(
+    getOptions,
+    (options, _oldOptions, onCleanup) => {
+      const scope = effectScope()
+      scope.run(() => {
+        virtualList.value = useVirtualList(
+          list,
+          options,
+        )
+      })
+      onCleanup(() => scope.stop())
+    },
+    {
+      immediate: true,
+      debounce: 50,
+    },
+  )
+  return virtualList
+}
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 7fca3aee84..3f3521b4e3 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { debouncedWatch, useElementSize, useEventListener, useVirtualList } from '@vueuse/core'
-import { computed, effectScope, ref, shallowRef, watchEffect } from 'vue'
+import { useElementSize, useEventListener } from '@vueuse/core'
+import { computed, ref, watchEffect } from 'vue'
 import type { SlideRoute } from '@slidev/types'
 import { breakpoints, showOverview } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
@@ -8,6 +8,7 @@ import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
 import { slideAspect } from '../env'
+import { useDynamicVirtualList } from '../composables/useDynamicVirtualList'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
@@ -34,14 +35,14 @@ const { width: containerWidth } = useElementSize(containerEl)
 
 const cardWidth = computed(() => {
   return xs.value
-  ? containerWidth.value
-  : Math.min(300, (containerWidth.value - gapX) / 2)
+    ? containerWidth.value
+    : Math.min(300, (containerWidth.value - gapX) / 2)
 })
 
 const numOfCols = computed(() => {
   return xs.value
     ? 1
-    : Math.floor((containerWidth.value + gapX)/ (cardWidth.value + gapX))
+    : Math.floor((containerWidth.value + gapX) / (cardWidth.value + gapX))
 })
 
 const cardHeight = computed(() => cardWidth.value / slideAspect.value)
@@ -50,37 +51,17 @@ const numOfRows = computed(() => {
   return Math.ceil(slides.value.length / numOfCols.value)
 })
 
-type VirtualListReturn = ReturnType<typeof useVirtualList<SlideRoute[]>>
-const virtualList = shallowRef<VirtualListReturn>()
-
 const slideRows = computed(() => {
   const cols = numOfCols.value
   const rows: SlideRoute[][] = []
-  for (let i = 0; i < numOfRows.value; i++) 
+  for (let i = 0; i < numOfRows.value; i++)
     rows.push(slides.value.slice(i * cols, (i + 1) * cols))
   return rows
 })
 
-// `useVirtualList`'s `itemHeight` is not reactive, so we need to re-create the virtual list when the card height changes.
-debouncedWatch(
-  cardHeight,
-  (cardHeight, _oldCardHeight, onCleanup) => {
-    const scope = effectScope()
-    scope.run(() => {
-      virtualList.value = useVirtualList(
-        slideRows,
-        {
-          itemHeight: cardHeight + gapY,
-        },
-      )
-    })
-    onCleanup(() => scope.stop())
-  },
-  {
-    immediate: true,
-    debounce: 50,
-  }
-)
+const virtualList = useDynamicVirtualList(slideRows, () => ({
+  itemHeight: cardHeight.value + gapY,
+}))
 
 const keyboardBuffer = ref<string>('')
 
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 224f6eec69..0058ffb707 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watchEffect } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { useVirtualList } from '@vueuse/core'
 import { slideAspect, slidesTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
+import { useDynamicVirtualList } from '../composables/useDynamicVirtualList'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -17,13 +17,13 @@ import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
-
 const cardHeight = computed(() => cardWidth / slideAspect.value)
 
 useHead({ title: `Overview - ${slidesTitle}` })
 
 const { openInEditor, slides } = useNav()
 
+const indexContainer = ref<HTMLElement>()
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
 const edittingNote = ref<number | null>(null)
@@ -31,12 +31,9 @@ const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
-const { list: vList, containerProps, wrapperProps, scrollTo: scrollToSlide } = useVirtualList(
-  slides,
-  {
-    itemHeight: cardHeight.value,
-  },
-)
+const virtualList = useDynamicVirtualList(slides, () => ({
+  itemHeight: cardHeight.value,
+}))
 
 const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
 function getClicksContext(route: SlideRoute) {
@@ -98,13 +95,19 @@ onMounted(() => {
     checkActiveBlocks()
   })
 })
+
+watchEffect(() => {
+  indexContainer.value?.children[activeBlocks.value[0]]?.scrollIntoView({
+    block: 'center',
+  })
+})
 </script>
 
 <template>
   <div class="h-screen w-screen of-hidden flex">
     <nav class="grid grid-rows-[auto_max-content] border-r border-main select-none max-h-full h-full">
       <div class="relative">
-        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-x-visible of-y-auto" style="direction:rtl">
+        <div ref="indexContainer" class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-x-visible of-y-auto" style="direction:rtl">
           <div
             v-for="(route, idx) of slides"
             :key="route.no"
@@ -114,7 +117,7 @@ onMounted(() => {
             <button
               class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
               :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
-              @click="scrollToSlide(idx)"
+              @click="virtualList?.scrollTo(idx)"
             >
               <div>{{ idx + 1 }}</div>
             </button>
@@ -142,12 +145,12 @@ onMounted(() => {
     <main
       class="flex-1 h-full of-auto"
       :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
-      v-bind="containerProps"
+      v-bind="virtualList?.containerProps"
       @scroll="checkActiveBlocks"
     >
-      <div v-bind="wrapperProps">
+      <div v-bind="virtualList?.wrapperProps.value">
         <div
-          v-for="{ data: route, index: idx } of vList"
+          v-for="{ data: route, index: idx } of virtualList?.list.value"
           :key="route.no"
           :ref="el => blocks.set(idx, el as any)"
           class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"

From a61c60a516d43540971dea5db8f3250f81857b2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Korde=C5=BE?= <jakobkordez1999@gmail.com>
Date: Fri, 24 May 2024 15:21:13 +0200
Subject: [PATCH 09/11] fix: overview

---
 packages/client/pages/overview.vue | 100 ++++++++++++++++-------------
 1 file changed, 54 insertions(+), 46 deletions(-)

diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 0058ffb707..9e6beefea6 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -18,6 +18,8 @@ import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 const cardHeight = computed(() => cardWidth / slideAspect.value)
+const paddingY = 4 * 5 // py-5 (single side)
+const rowHeight = computed(() => cardHeight.value + paddingY * 2 + 2) // 2 for top and bottom border
 
 useHead({ title: `Overview - ${slidesTitle}` })
 
@@ -32,7 +34,7 @@ const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
 const virtualList = useDynamicVirtualList(slides, () => ({
-  itemHeight: cardHeight.value,
+  itemHeight: rowHeight.value,
 }))
 
 const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
@@ -143,7 +145,7 @@ watchEffect(() => {
       </div>
     </nav>
     <main
-      class="flex-1 h-full of-auto"
+      class="flex-1 h-full of-auto py-5"
       :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
       v-bind="virtualList?.containerProps"
       @scroll="checkActiveBlocks"
@@ -153,55 +155,61 @@ watchEffect(() => {
           v-for="{ data: route, index: idx } of virtualList?.list.value"
           :key="route.no"
           :ref="el => blocks.set(idx, el as any)"
-          class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
-          :class="idx === 0 ? 'pt5' : ''"
+          class="relative of-hidden flex group"
+          :class="idx === 0 ? '' : 'border-t border-main'"
+          :style="`height: ${rowHeight}px`"
         >
-          <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
-            <div class="text-3xl op20 mb2">
-              {{ idx + 1 }}
+          <div
+            class="ml-4 flex gap-4"
+            :style="`margin-bottom: ${paddingY}px; margin-top: ${paddingY}px;`"
+          >
+            <div class="select-none text-right flex flex-col gap-1 items-end">
+              <div class="text-3xl op20 mb2">
+                {{ idx + 1 }}
+              </div>
+              <IconButton
+                class="mr--3 op0 group-hover:op80"
+                title="Play in new tab"
+                @click="openSlideInNewTab(getSlidePath(route, false))"
+              >
+                <carbon:presentation-file />
+              </IconButton>
+              <IconButton
+                v-if="route.meta?.slide"
+                class="mr--3 op0 group-hover:op80"
+                title="Open in editor"
+                @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+              >
+                <carbon:cics-program />
+              </IconButton>
             </div>
-            <IconButton
-              class="mr--3 op0 group-hover:op80"
-              title="Play in new tab"
-              @click="openSlideInNewTab(getSlidePath(route, false))"
-            >
-              <carbon:presentation-file />
-            </IconButton>
-            <IconButton
-              v-if="route.meta?.slide"
-              class="mr--3 op0 group-hover:op80"
-              title="Open in editor"
-              @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
-            >
-              <carbon:cics-program />
-            </IconButton>
-          </div>
-          <div class="flex flex-col gap-2 my5">
-            <div
-              class="border rounded border-main overflow-hidden bg-main select-none h-max"
-              @dblclick="openSlideInNewTab(getSlidePath(route, false))"
-            >
-              <SlideContainer
-                :key="route.no"
-                :width="cardWidth"
-                class="pointer-events-none important:[&_*]:select-none"
+            <div class="flex flex-col gap-2">
+              <div
+                class="border rounded border-main overflow-hidden bg-main select-none h-max"
+                @dblclick="openSlideInNewTab(getSlidePath(route, false))"
               >
-                <SlideWrapper
-                  :clicks-context="getClicksContext(route)"
-                  :route="route"
-                  render-context="overview"
-                />
-                <DrawingPreview :page="route.no" />
-              </SlideContainer>
+                <SlideContainer
+                  :key="route.no"
+                  :width="cardWidth"
+                  class="pointer-events-none important:[&_*]:select-none"
+                >
+                  <SlideWrapper
+                    :clicks-context="getClicksContext(route)"
+                    :route="route"
+                    render-context="overview"
+                  />
+                  <DrawingPreview :page="route.no" />
+                </SlideContainer>
+              </div>
+              <ClicksSlider
+                v-if="getSlideClicks(route)"
+                :clicks-context="getClicksContext(route)"
+                class="w-full mt-2"
+                @dblclick="getClicksContext(route).current = CLICKS_MAX"
+              />
             </div>
-            <ClicksSlider
-              v-if="getSlideClicks(route)"
-              :clicks-context="getClicksContext(route)"
-              class="w-full mt-2"
-              @dblclick="getClicksContext(route).current = CLICKS_MAX"
-            />
           </div>
-          <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
+          <div class="py3 mt-0.5 mr--4 op0 transition group-hover:op100">
             <IconButton
               title="Edit Note"
               class="rounded-full w-9 h-9 text-sm"

From 02bb8bb06b1c70820593a42d61d07ff6475d4e4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Korde=C5=BE?= <jakobkordez1999@gmail.com>
Date: Tue, 28 May 2024 11:24:11 +0200
Subject: [PATCH 10/11] Remove row grouping and set static row height

---
 packages/client/internals/QuickOverview.vue | 32 ++++++++-------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 3f3521b4e3..04024c5d4b 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useElementSize, useEventListener } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import type { SlideRoute } from '@slidev/types'
 import { breakpoints, showOverview } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
@@ -47,20 +46,15 @@ const numOfCols = computed(() => {
 
 const cardHeight = computed(() => cardWidth.value / slideAspect.value)
 
-const numOfRows = computed(() => {
-  return Math.ceil(slides.value.length / numOfCols.value)
-})
-
-const slideRows = computed(() => {
-  const cols = numOfCols.value
-  const rows: SlideRoute[][] = []
-  for (let i = 0; i < numOfRows.value; i++)
-    rows.push(slides.value.slice(i * cols, (i + 1) * cols))
-  return rows
-})
-
-const virtualList = useDynamicVirtualList(slideRows, () => ({
-  itemHeight: cardHeight.value + gapY,
+const virtualList = useDynamicVirtualList(slides, () => ({
+  itemHeight: (i) => {
+    if (i === slides.value.length - 1)
+      return cardHeight.value + 2
+    if (i % numOfCols.value === numOfCols.value - 1)
+      return cardHeight.value + gapY + 2
+    return 0
+  },
+  overscan: 4 * numOfCols.value,
 }))
 
 const keyboardBuffer = ref<string>('')
@@ -138,13 +132,11 @@ setTimeout(() => {
     >
       <div ref="containerEl" v-bind="virtualList?.wrapperProps.value">
         <div
-          v-for="{ index: rowIdx, data: row } of virtualList?.list.value"
-          :key="rowIdx"
-          class="grid grid-rows-1 gap-x-8 w-full mb-8"
-          :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+          class="grid w-full"
+          :style="`grid-template-columns: repeat(${numOfCols},minmax(${cardWidth}px,1fr)); grid-auto-rows: ${cardHeight + 2}px; gap: ${gapX}px ${gapY}px`"
         >
           <div
-            v-for="route of row"
+            v-for="{ data: route } of virtualList?.list.value"
             :key="route.no"
             class="relative"
           >

From cfd5b3c4a92ebd3674ba4a5e2502d21150e6cbfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Korde=C5=BE?= <jakobkordez1999@gmail.com>
Date: Tue, 28 May 2024 12:12:08 +0200
Subject: [PATCH 11/11] Cleanup overview page

---
 packages/client/pages/overview.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 9e6beefea6..4fa9156f8f 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -19,7 +19,7 @@ import { useNav } from '../composables/useNav'
 const cardWidth = 450
 const cardHeight = computed(() => cardWidth / slideAspect.value)
 const paddingY = 4 * 5 // py-5 (single side)
-const rowHeight = computed(() => cardHeight.value + paddingY * 2 + 2) // 2 for top and bottom border
+const rowHeight = computed(() => cardHeight.value + paddingY * 2 + 3) // 2 for card border & 1 for row border
 
 useHead({ title: `Overview - ${slidesTitle}` })
 
@@ -145,19 +145,21 @@ watchEffect(() => {
       </div>
     </nav>
     <main
-      class="flex-1 h-full of-auto py-5"
-      :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      class="py-5"
       v-bind="virtualList?.containerProps"
       @scroll="checkActiveBlocks"
     >
-      <div v-bind="virtualList?.wrapperProps.value">
+      <div
+        class="grid grid-cols-1"
+        :style="`grid-auto-rows: ${rowHeight}px`"
+        v-bind="virtualList?.wrapperProps.value"
+      >
         <div
           v-for="{ data: route, index: idx } of virtualList?.list.value"
           :key="route.no"
           :ref="el => blocks.set(idx, el as any)"
           class="relative of-hidden flex group"
           :class="idx === 0 ? '' : 'border-t border-main'"
-          :style="`height: ${rowHeight}px`"
         >
           <div
             class="ml-4 flex gap-4"