Make page popup responsive

ui/src/debug/PageSelectionPopup.svelte

@@ -26,9 +26,7 @@
     <span class="mt-1 pr-2" on:click={$pagePinned && unpinPage}>
         <Collection size="1x" class={$pagePinned ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
     </span>
-    <div
-        class="grid gap-3"
-        style="grid-template-columns: repeat({Math.min(20, pageControl.totalPages)}, minmax(0, 1fr));">
+    <div class="grid gap-3 grid-cols-5 sm:grid-cols-10 md:grid-cols-15 xl:grid-cols-20">
         {#each new Array(pageControl.totalPages) as _, idx}
             <div
                 on:click={() => pageControl.pageHasItems(idx) && pinPage(idx)}

ui/tailwind.config.js

@@ -14,6 +14,10 @@ module.exports = {
                 // gray-400 hue-rotated 180deg
                 select: '#A8A297',
             },
+            gridTemplateColumns: {
+                15: 'repeat(15, minmax(0, 1fr))',
+                20: 'repeat(20, minmax(0, 1fr))',
+            },
         },
     },
     variants: {