Update: course card styling

chaynHQ · Dec 27, 2024 · 9d0c0b5 · 9d0c0b5
1 parent 58f6bbc
commit 9d0c0b5
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx
@@ -29,7 +29,7 @@ const cardContentStyle = {
   ...rowStyle,
   gap: 2,
   padding: { xs: 2, md: 3 },
-  paddingBottom: '0.5rem !important',
+  paddingBottom: '0rem !important',
   minHeight: { xs: 124, md: 136 },
 } as const;
 
@@ -43,8 +43,9 @@ const cardActionStyle = {
 
 const imageContainerStyle = {
   position: 'relative',
-  width: { xs: 80, md: 120 },
-  height: { xs: 80, md: 120 },
+  width: '100%',
+  maxHeight: '110px',
+  minHeight: '72px',
 } as const;
 
 const collapseContentStyle = {
@@ -90,7 +91,7 @@ const CourseCard = (props: CourseCardProps) => {
           aria-label={`${t('navigateToCourse')} ${course.content.name}`}
         >
           <CardContent sx={cardContentStyle}>
-            <Box sx={imageContainerStyle}>
+            <Box flex={[2, 1]} sx={imageContainerStyle}>
               <Image
                 alt={course.content.image.alt}
                 src={course.content.image.filename}
@@ -101,7 +102,7 @@ const CourseCard = (props: CourseCardProps) => {
                 }}
               />
             </Box>
-            <Box flex={1}>
+            <Box flex={[3, 2]}>
               <Typography component="h3" variant="h3">
                 {course.content.name}
               </Typography>