From 88b9613abf9045366eeb9d8c6a4423619a5b08a1 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Mon, 26 Feb 2024 16:33:12 +0100
Subject: [PATCH] Some fix for iOS

---
 src/pages/[locale]/index.astro           | 28 +++++++++++++++++++-----
 src/pages/_components/CategoryCard.astro | 13 ++++++++---
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index d10cc58..e300438 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -287,12 +287,25 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 
       &#library {
         & > .grid {
+          & > :global(a) {
+            padding: 10%;
+
+            @media (max-width: 40rem) {
+              padding: 5%;
+            }
+
+            @media (max-width: 22rem) {
+              padding: 10%;
+            }
+          }
+
           @media (max-width: 40rem) {
             grid-template-columns: 1fr 1fr;
           }
 
-          @media (max-width: 25rem) {
+          @media (max-width: 22rem) {
             grid-template-columns: 1fr;
+            gap: 12px;
           }
         }
       }
@@ -300,14 +313,10 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
       & > .grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        column-gap: clamp(6px, 2vmin, 16px);
-        row-gap: clamp(6px + 6px, 2vmin + 6px, 16px);
       }
 
       & > .flex {
         display: flex;
-        column-gap: clamp(6px, 2vmin, 16px);
-        row-gap: clamp(6px + 6px, 2vmin + 6px, 16px);
         flex-wrap: wrap;
 
         @media (max-width: 35rem) {
@@ -315,6 +324,15 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
           grid-template-columns: 1fr;
         }
       }
+
+      & > .grid,
+      & > .flex {
+        gap: clamp(6px, 2vmin, 16px);
+
+        @media (max-width: 22rem) {
+          gap: 12px;
+        }
+      }
     }
   }
 </style>
diff --git a/src/pages/_components/CategoryCard.astro b/src/pages/_components/CategoryCard.astro
index 6528bf1..04038fa 100644
--- a/src/pages/_components/CategoryCard.astro
+++ b/src/pages/_components/CategoryCard.astro
@@ -16,7 +16,7 @@ const { img, name, href } = Astro.props;
         <img src={img.dark} class="when-dark-theme" alt={name} title={name} />
       </>
     ) : (
-      <p>{name}</p>
+      <div><p>{name}</p></div>
     )
   }
 </a>
@@ -29,16 +29,23 @@ const { img, name, href } = Astro.props;
     display: grid;
     place-items: center;
 
-    padding: 24px;
     border-radius: 12px;
 
     user-select: none;
-    aspect-ratio: 2;
 
     & > img {
       object-fit: contain;
       height: 100%;
       width: 100%;
+      aspect-ratio: 2;
     }
+
+    & > div {
+      aspect-ratio: 2;
+      width: 100%;
+      display: grid;
+      place-content: center;
+    }
+
   }
 </style>