From ac5a656f411deb71ff60e439881356fb18383068 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Mon, 25 Sep 2023 18:37:30 +0300
Subject: [PATCH] fix grid on mobile

---
 src/components/CardGrid/styles.module.css |  5 +++--
 src/components/PageGrid/index.tsx         | 19 +++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/CardGrid/styles.module.css b/src/components/CardGrid/styles.module.css
index 30c72811..ee286d7e 100644
--- a/src/components/CardGrid/styles.module.css
+++ b/src/components/CardGrid/styles.module.css
@@ -1,6 +1,6 @@
 .grid {
-    /* --min-cell-size: 270px; */
-    /* grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr)); */
+    --min-cell-size: 270px;
+    grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr));
     display: grid;
     grid-auto-rows: 25em;
     grid-auto-flow: dense;
@@ -13,3 +13,4 @@
         grid-gap: var(--size-m);
     }
 }
+
diff --git a/src/components/PageGrid/index.tsx b/src/components/PageGrid/index.tsx
index 822d7111..da97c313 100644
--- a/src/components/PageGrid/index.tsx
+++ b/src/components/PageGrid/index.tsx
@@ -5,12 +5,23 @@ import { Card, CardLayout } from "../Card"
 import { Date } from "./Date"
 import { Spacer } from "../Spacer"
 import { Box } from "@/ui/Box"
+import { useMobile } from "@/hooks/useMobile"
+
+function itemColumn(item: PageCardDto): string {
+    return item.featured ? "span 2" : "auto"
+}
+
+function itemLayout(item: PageCardDto): CardLayout {
+    return item.featured ? "featured" : "simple"
+}
 
 export type PageGridProps = {
     items: PageCardDto[]
 }
 
 export const PageGrid: React.FC<PageGridProps> = props => {
+    const mobile = useMobile()
+
     return (
         <CardGrid
             style={{
@@ -18,8 +29,10 @@ export const PageGrid: React.FC<PageGridProps> = props => {
             }}
         >
             {props.items.map(item => {
-                const gridColumn = item.featured ? "span 2" : "auto"
-                const layout: CardLayout = item.featured ? "featured" : "simple"
+                const gridColumn = mobile
+                    ? "auto"
+                    : itemColumn(item)
+                const layout = itemLayout(item)
 
                 const content = !item.featured
                     ? (
@@ -64,3 +77,5 @@ export const PageGrid: React.FC<PageGridProps> = props => {
         </CardGrid>
     )
 }
+
+