fix(UI): card component spaces

eclipse-tractusx · Oct 11, 2024 · 72cb531 · 72cb531
2 parents 27e1eb4 + b4f4eed
commit 72cb531
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/components/content/Cards/Card.tsx b/src/components/content/Cards/Card.tsx
@@ -310,7 +310,9 @@ export const Card = ({
           )}
         </Box>
         <Box
-          sx={{ marginBottom: '20px' }}
+          sx={{
+            marginBottom: '20px',
+          }}
           className="cx-card__content--wrapper"
         >
           {statusText && imageSize === 'small' && showStatus && (

diff --git a/src/components/content/Cards/CardContent.tsx b/src/components/content/Cards/CardContent.tsx
@@ -39,28 +39,39 @@ export const CardContent = ({
   description,
 }: CardContentProps) => {
   return (
-    <Box sx={{ padding: '20px' }} className="cx-card__content">
-      <Box sx={{ height: '35px' }}>
+    <Box
+      sx={{ padding: '20px', overflowWrap: 'break-word' }}
+      className="cx-card__content"
+    >
+      <Box sx={{ height: '35px', mb: '10px' }}>
         {subtitle && (
           <Typography
             variant="label3"
-            sx={{ color: 'text.tertiary', display: 'inline-block' }}
+            sx={{
+              color: 'text.tertiary',
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitBoxOrient: 'vertical',
+              WebkitLineClamp: '2',
+              lineHeight: '20px',
+            }}
           >
             {subtitle}
           </Typography>
         )}
       </Box>
-      <Box sx={{ height: '35px' }}>
+      <Box sx={{ height: '35px', mb: '10px' }}>
         <Typography
           variant="h5"
           sx={{
             marginTop: 0.5,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'normal',
-            display: 'box',
-            lineClamp: '2',
-            boxOrient: 'vertical',
+            display: '-webkit-box',
+            WebkitLineClamp: '2',
+            WebkitBoxOrient: 'vertical',
+            lineHeight: '20px',
           }}
         >
           {title}
@@ -80,7 +91,16 @@ export const CardContent = ({
         </Box>
       )}
       {description && (
-        <Typography variant="body3" sx={{ marginTop: 1.5 }}>
+        <Typography
+          variant="body3"
+          sx={{
+            marginTop: 1.5,
+            overflow: 'hidden',
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: '2',
+          }}
+        >
           {description}
         </Typography>
       )}