From 6db29ba821d0d3275e7353c8b8a6b4de34ffdc79 Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2022)" <d.mijatovic@dv4all.nl>
Date: Wed, 30 Nov 2022 16:45:44 +0100
Subject: [PATCH] fix: change project card orientation to portrait for mobile

---
 frontend/components/projects/ProjectCard.tsx | 6 +++---
 frontend/pages/projects/index.tsx            | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/components/projects/ProjectCard.tsx b/frontend/components/projects/ProjectCard.tsx
index 1ac235264..4fef44371 100644
--- a/frontend/components/projects/ProjectCard.tsx
+++ b/frontend/components/projects/ProjectCard.tsx
@@ -59,10 +59,10 @@ export default function ProjectCard(
       href={projectUrl()}
       className={`flex flex-col h-full bg-base-200 text-content ${opacity} hover:bg-secondary hover:text-white`}
       passHref>
-      <article className="flex flex-1 h-full px-4 gap-4 overflow-hidden">
+      <article className="flex-1 flex flex-col md:flex-row h-full p-4 gap-4 overflow-hidden">
         <section
           title={subtitle ?? title}
-          className="flex-[2] py-4 h-full"
+          className="flex-[3] md:flex-[2] h-full"
           >
           <ImageAsBackground
             alt={title}
@@ -73,7 +73,7 @@ export default function ProjectCard(
             noImgMsg='no image'
           />
         </section>
-        <section className="flex-[3] flex flex-col py-4">
+        <section className="flex-[3] flex flex-col">
           <h2
             title={title}
             className={`max-h-[6rem] overflow-clip ${titleMargin}`}>
diff --git a/frontend/pages/projects/index.tsx b/frontend/pages/projects/index.tsx
index d50206472..b1258f14a 100644
--- a/frontend/pages/projects/index.tsx
+++ b/frontend/pages/projects/index.tsx
@@ -44,8 +44,9 @@ export default function ProjectsIndexPage(
   const router = useRouter()
   // use media query hook for small screen logic
   const smallScreen = useMediaQuery('(max-width:600px)')
-  // adjust grid min width for mobile
+  // adjust grid width and height for mobile
   const minWidth = smallScreen ? '18rem' : '29rem'
+  const itemHeight = smallScreen ? '23rem' : '17rem'
 
   // console.log('ProjectsIndexPage...domains...', domains)
 
@@ -141,7 +142,7 @@ export default function ProjectsIndexPage(
 
       <ProjectsGrid
         projects={projects}
-        height='17rem'
+        height={itemHeight}
         minWidth={minWidth}
         maxWidth='1fr'
         className="gap-[0.125rem] p-[0.125rem] pt-4 pb-12"