From 553b3f9091cbdc17694ec6371ca30f78e8af3cd1 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 13 Feb 2025 00:26:45 +0600
Subject: [PATCH] web/PickerDialog: align the grid perfectly, better scaling

---
 web/src/components/dialog/PickerDialog.svelte | 60 +++++++++++++++----
 web/src/components/dialog/PickerItem.svelte   |  2 +-
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/web/src/components/dialog/PickerDialog.svelte b/web/src/components/dialog/PickerDialog.svelte
index b84ea4ad..80f27412 100644
--- a/web/src/components/dialog/PickerDialog.svelte
+++ b/web/src/components/dialog/PickerDialog.svelte
@@ -65,6 +65,9 @@
 <style>
     .picker-dialog {
         --picker-item-size: 120px;
+        --picker-item-gap: 4px;
+        --picker-item-area: calc(var(--picker-item-size) + var(--picker-item-gap));
+
         gap: var(--padding);
         max-height: calc(
             90% - env(safe-area-inset-bottom) - env(safe-area-inset-top)
@@ -77,7 +80,7 @@
         flex-direction: column;
         align-items: flex-start;
         gap: 3px;
-        max-width: calc(var(--picker-item-size) * 4);
+        max-width: calc(var(--picker-item-area) * 4);
     }
 
     .popup-title-container {
@@ -112,6 +115,7 @@
         display: grid;
         justify-items: center;
         grid-template-columns: 1fr 1fr 1fr 1fr;
+        gap: var(--picker-item-gap);
     }
 
     .three-columns .picker-body {
@@ -119,7 +123,7 @@
     }
 
     .three-columns .popup-header {
-        max-width: calc(var(--picker-item-size) * 3);
+        max-width: calc(var(--picker-item-area) * 3);
     }
 
     :global(.picker-item) {
@@ -133,7 +137,19 @@
         }
 
         .popup-header {
-            max-width: calc(var(--picker-item-size) * 3);
+            max-width: calc(var(--picker-item-area) * 3);
+        }
+    }
+
+    @media screen and (max-width: 410px) {
+        .picker-dialog {
+            --picker-item-size: 118px;
+        }
+    }
+
+    @media screen and (max-width: 405px) {
+        .picker-dialog {
+            --picker-item-size: 116px;
         }
     }
 
@@ -143,38 +159,62 @@
         }
     }
 
-    @media screen and (max-width: 380px) {
+    @media screen and (max-width: 395px) {
+        .picker-dialog {
+            --picker-item-size: 113px;
+        }
+    }
+
+    @media screen and (max-width: 388px) {
         .picker-dialog {
             --picker-item-size: 110px;
         }
     }
 
-    @media screen and (max-width: 365px) {
+    @media screen and (max-width: 378px) {
         .picker-dialog {
             --picker-item-size: 105px;
         }
     }
 
-    @media screen and (max-width: 350px) {
+    @media screen and (max-width: 365px) {
         .picker-dialog {
             --picker-item-size: 100px;
         }
     }
 
-    @media screen and (max-width: 335px) {
+    @media screen and (max-width: 352px) {
+        .picker-dialog {
+            --picker-item-size: 95px;
+        }
+    }
+
+    @media screen and (max-width: 334px) {
+        .picker-dialog {
+            --picker-item-size: 130px;
+        }
+
         .picker-body,
         .three-columns .picker-body {
             grid-template-columns: 1fr 1fr;
         }
+    }
 
-        .popup-header {
-            max-width: calc(var(--picker-item-size) * 3);
+    @media screen and (max-width: 300px) {
+        .picker-dialog {
+            --picker-item-size: 120px;
+        }
+    }
+
+    @media screen and (max-width: 280px) {
+        .picker-dialog {
+            --picker-item-size: 110px;
         }
     }
 
     @media screen and (max-width: 255px) {
         .picker-dialog {
-            --picker-item-size: 120px;
+            --picker-item-size: 140px;
         }
 
         .picker-body,
diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte
index 04e301ec..5a4ca62a 100644
--- a/web/src/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -62,7 +62,7 @@
     .picker-item {
         position: relative;
         background: none;
-        padding: 2px;
+        padding: 0;
         box-shadow: none;
         border-radius: calc(var(--border-radius) / 2 + 2px);
     }