fix infinite scroll

src/components.d.ts

@@ -11,7 +11,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    GridViewport: typeof import('./components/GridViewport.vue')['default']
     InfiniteScrollContainer: typeof import('./components/InfiniteScrollContainer.vue')['default']
     InfiniteScrollDemo: typeof import('./components/InfiniteScrollDemo.vue')['default']
     Layout: typeof import('./components/Layout.vue')['default']

src/components/MosaicViewport.vue

@@ -13,7 +13,6 @@
                 :key="`${viewport.index}-${cell.id}`"
                 @click="openNote(cell.content)"
             >
-                <!-- GIF placeholder - you'll replace with actual GIFs -->
                 <div class="gif-placeholder">
                     <div class="gif-info">
                         <span class="gif-id">{{ cell.content.id }}</span>
@@ -23,8 +22,6 @@
                             }}</span
                         >
                     </div>
-                    <!-- This would be your actual GIF -->
-                    <!-- <img :src="cell.content.gifUrl" :alt="cell.content.title" /> -->
                 </div>
             </div>
         </div>

src/composables/useInfiniteScroll.js

@@ -164,13 +164,13 @@ export const useInfiniteScroll = (options = {}) => {
         }
 
         const indexes = Array.from(state.viewports.keys())
-        const minIndex = Math.min(...indexes)
+        // const minIndex = Math.min(...indexes)
         const maxIndex = Math.max(...indexes)
 
         // Calculate total height needed to accommodate all viewports
         // Add extra buffer above and below for infinite scroll
-        const bufferViewports = 10
-        const totalRange = maxIndex - minIndex + 1 + bufferViewports * 2
+        const bufferViewports = 8
+        const totalRange = maxIndex + bufferViewports
         state.totalHeight = totalRange * vpHeight.value
     }