From 36bceaa9cd977bfe85c8f3b33eaed4b21262a233 Mon Sep 17 00:00:00 2001
From: Shri Hari <shrihari101307@gmail.com>
Date: Fri, 21 Feb 2025 01:16:09 +0530
Subject: [PATCH 1/2] Fix: Ensure consistent height for course cards on
 '/courses' page

Set a uniform height for all course cards to address UI inconsistencies caused by varying title lengths
---
 components/cards/CourseCard.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx
index 00807063..307f182e 100644
--- a/components/cards/CourseCard.tsx
+++ b/components/cards/CourseCard.tsx
@@ -26,6 +26,8 @@ const cardStyle = {
   alignSelf: 'flex-start',
   width: '100%',
   backgroundColor: 'background.default',
+  display: 'flex',
+  flexDirection: 'column',
 } as const;
 
 const cardContentStyle = {
@@ -51,6 +53,20 @@ const imageContainerStyle = {
   minHeight: '72px',
 } as const;
 
+const titleContainerStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+} as const;
+
+const titleStyle = {
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+} as const;
+
 const collapseContentStyle = {
   padding: { xs: 2, md: 3 },
   paddingTop: { xs: 0, md: 0 },
@@ -106,8 +122,8 @@ const CourseCard = (props: CourseCardProps) => {
                 }}
               />
             </Box>
-            <Box flex={[3, 2]}>
-              <Typography component="h3" variant="h3">
+            <Box flex={[3, 2]} sx={titleContainerStyle}>
+              <Typography component="h3" variant="h3" sx={expanded ? {} : titleStyle}>
                 {course.content.name}
               </Typography>
             </Box>
@@ -126,8 +142,8 @@ const CourseCard = (props: CourseCardProps) => {
               }}
             />
           </Box>
-          <Box flex={1}>
-            <Typography component="h3" variant="h3">
+          <Box flex={1} sx={titleContainerStyle}>
+            <Typography component="h3" variant="h3" sx={expanded ? {} : titleStyle}>
               {course.content.name}
             </Typography>
             {!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && (

From c95f9cdf35456a44c9ec3f0a502b9ddd3bf69b9e Mon Sep 17 00:00:00 2001
From: Kylee Fields <43586156+kyleecodes@users.noreply.github.com>
Date: Fri, 28 Feb 2025 23:15:50 -0500
Subject: [PATCH 2/2] Update CourseCard.tsx

Modified WebkitLineClamp in titleStyle from 2 to 3 to align title visibility and aesthetics.
---
 components/cards/CourseCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx
index 307f182e..20791be1 100644
--- a/components/cards/CourseCard.tsx
+++ b/components/cards/CourseCard.tsx
@@ -61,7 +61,7 @@ const titleContainerStyle = {
 
 const titleStyle = {
   display: '-webkit-box',
-  WebkitLineClamp: 2,
+  WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical',
   overflow: 'hidden',
   textOverflow: 'ellipsis',