From 531b9e3d643fb7a109529bf72ac57277413d5382 Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Thu, 30 Mar 2023 12:09:42 +0530
Subject: [PATCH] style: fixed height issue in module card (#599)

---
 .../components/modules/single-module-card.tsx | 19 +++++++++++--------
 .../projects/[projectId]/modules/index.tsx    |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 85188dd6b..cf7cbaeff 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -191,7 +191,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             </div>
           </div>
         </div>
-        <div className="flex flex-col h-full items-end">
+        <div className="flex flex-col items-end h-20">
           <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4">
             <span>Progress</span>
             <div className="bar relative h-1 w-full rounded bg-gray-300">
@@ -204,16 +204,19 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             </div>
             <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
           </div>
-          <div className="flex justify-between w-full px-4 pb-4 bg-gray-100 item-center">
+          <div className="flex justify-between w-full h-full px-4 pb-4 bg-gray-100 item-center">
             <p className="text-[#858E96]">
               Last updated:
-              <span className="text-black font-medium">
-                {renderShortDateWithYearFormat(lastUpdated)}
-              </span>
+                <span className="text-black font-medium">
+                  {renderShortDateWithYearFormat(lastUpdated)}
+                </span>
             </p>
-            <div className="flex items-center gap-1">
-              <AssigneesList users={module.members_detail} length={4} />
-            </div>
+            {
+              module.members_detail.length>0 &&
+              <div className="flex items-center gap-1">
+                <AssigneesList users={module.members_detail} length={4} />
+              </div>
+            }
           </div>
         </div>
       </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 5b7c10f6b..dd4dfb23f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -95,7 +95,7 @@ const ProjectModules: NextPage<UserAuth> = (props) => {
             <div className="flex flex-col gap-5">
               <h3 className="text-3xl font-semibold text-black">Modules</h3>
 
-              <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+              <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
                 {modules.map((module) => (
                   <SingleModuleCard
                     key={module.id}