From 5cd6b129519d68338c1ed2780ef656e03d5bf082 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 7 Sep 2022 10:17:39 +0300
Subject: [PATCH] fix: project grid layout

---
 .../ProjectsPage/ProjectCard/ProjectCard.tsx    | 17 +++++++++--------
 .../pages/ProjectsPage/ProjectsPage.tsx         |  4 ++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/features/Tournaments/pages/ProjectsPage/ProjectCard/ProjectCard.tsx b/src/features/Tournaments/pages/ProjectsPage/ProjectCard/ProjectCard.tsx
index dc8b7d4..c9e65ec 100644
--- a/src/features/Tournaments/pages/ProjectsPage/ProjectCard/ProjectCard.tsx
+++ b/src/features/Tournaments/pages/ProjectsPage/ProjectCard/ProjectCard.tsx
@@ -29,21 +29,22 @@ export default function ProjectCard({ project }: Props) {
     }
 
     return (
-        <Card>
+        <Card className="flex flex-col gap-24">
             <div className="flex flex-wrap gap-24 items-start">
-                <img src={project.thumbnail_image} className='shrink-0 w-64 md:w-80 aspect-square rounded-full outline outline-2 outline-gray-200' alt="" />
+                <img src={project.thumbnail_image} className='shrink-0 w-64 aspect-square rounded-full outline outline-2 outline-gray-200' alt="" />
                 <div className="flex flex-col gap-4 flex-1 overflow-hidden">
                     <p className="text-body2 text-gray-900 font-bold">{project.title}</p>
                     <p className="text-body4 text-gray-600 font-medium">{project.category.icon} {project.category.title}</p>
                 </div>
             </div>
-            <p className="mt-24 text-body5 text-gray-400 line-clamp-2 max-w-[60ch]">{project.description} </p>
-            <div className="mt-24">
-                <p className="text-body5 text-gray-900 font-medium mb-12">👾 Makers</p>
-                <FaUsers className='text-body2 mr-4' /> <span className='align-middle'>6 makers</span>
-
+            <p className=" text-body5 text-gray-400 line-clamp-2 max-w-[60ch]">{project.description} </p>
+            <div className="mt-auto">
+                {/* <p className="text-body5 text-gray-900 font-medium mb-12">👾 Makers</p> */}
+                <p className="text-body5 text-gray-600 font-medium">
+                    <FaUsers className='text-body2 mr-4' /> <span className='align-middle'>6 makers</span>
+                </p>
             </div>
-            <Button fullWidth color='primary' onClick={openProject} size='sm' className='mt-24'>View Details</Button>
+            <Button fullWidth color='primary' onClick={openProject} className=''>View Details</Button>
         </Card>
     )
 }
diff --git a/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx b/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx
index 03dbd5e..0e7b6b1 100644
--- a/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx
+++ b/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx
@@ -39,7 +39,7 @@ export default function ProjectsPage({ data: { id } }: Props) {
 
     return (
         <div className='pb-42 flex flex-col gap-24'>
-            <h2 className='text-body1 font-bolder text-gray-900 mb-24'>Projects {projectsCount && `(${projectsCount})`}</h2>
+            <h2 className='text-body1 font-bolder text-gray-900'>Projects {projectsCount && `(${projectsCount})`}</h2>
 
             <div className="input-wrapper relative">
                 <FiSearch className="self-center ml-16 flex-shrink-0 w-[20px] text-gray-400" />
@@ -51,7 +51,7 @@ export default function ProjectsPage({ data: { id } }: Props) {
                     onChange={e => changeSearchFilter(e.target.value)}
                 />
             </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-24">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-24">
                 {query.loading ?
                     Array(9).fill(0).map((_, idx) => <ProjectCardSkeleton key={idx} />)
                     :