From efcd2b01c0740d46a1ed04dcd3ddf458babcf564 Mon Sep 17 00:00:00 2001
From: Johannes Zillmann <jzillmann@googlemail.com>
Date: Fri, 26 Mar 2021 14:04:26 +0100
Subject: [PATCH] Make page popup responsive

---
 ui/src/debug/PageSelectionPopup.svelte | 6 ++----
 ui/tailwind.config.js                  | 4 ++++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/src/debug/PageSelectionPopup.svelte b/ui/src/debug/PageSelectionPopup.svelte
index 36dcbfc..b387285 100644
--- a/ui/src/debug/PageSelectionPopup.svelte
+++ b/ui/src/debug/PageSelectionPopup.svelte
@@ -26,13 +26,11 @@
     <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)}
-                class="px-2 border border-gray-300 rounded-full text-center {pageControl.pageHasItems(idx) ? ($pinnedPageIndex === idx ? 'bg-select' : 'hover:text-select hover:border-select cursor-pointer') : 'opacity-50'}">
+                class="px-2 border border-gray-300 rounded-full text-center  {pageControl.pageHasItems(idx) ? ($pinnedPageIndex === idx ? 'bg-select' : 'hover:text-select hover:border-select cursor-pointer') : 'opacity-50'}">
                 {idx + 1}
             </div>
         {/each}
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 70dae8f..46106de 100644
--- a/ui/tailwind.config.js
+++ b/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: {