UI: allow card description to take 3 lines before wrapping

- #395 (comment)
kitspace · Jun 1, 2022 · ab5105b · ab5105b
1 parent 40ccb87
commit ab5105b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/frontend/src/components/ProjectCard/index.js b/frontend/src/components/ProjectCard/index.js
@@ -39,7 +39,9 @@ const ProjectCard = ({ name, summary, ownerName, multiParentName }) => {
             {name}
           </Card.Header>
           <Card.Meta className={styles.cardText}>{ownerName}</Card.Meta>
-          <Card.Description className={styles.cardText}>{summary}</Card.Description>
+          <Card.Description className={styles.cardDescription}>
+            {summary}
+          </Card.Description>
         </Card.Content>
       </Card>
     </Link>

diff --git a/frontend/src/components/ProjectCard/index.module.scss b/frontend/src/components/ProjectCard/index.module.scss
@@ -16,3 +16,12 @@
   white-space:nowrap;
   text-overflow: ellipsis;
 }
+
+.cardDescription {
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical
+}