Database overhall with knex.js, some things untested

src/routes/(app)/library/albums/+page.svelte

@@ -16,12 +16,14 @@
             <h1>{albums.error}</h1>
         {:else if $itemDisplayState === 'list'}
             <div class="text-md flex flex-col gap-4">
-                {#each albums as album}
+                <!-- .slice is temporary to mimic performance with pagination -->
+                {#each albums.slice(0, 100) as album}
                     <ListItem mediaItem={album} />
                 {/each}
             </div>
         {:else}
             <div id="library-wrapper">
+                <!-- .slice is temporary to mimic performance with pagination -->
                 {#each albums as album}
                     <AlbumCard {album} />
                 {/each}
@@ -36,4 +38,10 @@
         /* gap: 1.5rem; */
         grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
     }
+    /* This caps the maxiumn number of columns at 10. Beyond that point the cards will continuously get larger */
+    @media (min-width: calc(13rem * 10)) {
+        #library-wrapper {
+            grid-template-columns: repeat(10, 1fr);
+        }
+    }
 </style>