UI|Fix: ProjectCard text overflow

Fixes #360
kitspace · Jun 20, 2022 · cb8c39c · cb8c39c
1 parent 7969198
commit cb8c39c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/frontend/src/components/ProjectCard/index.js b/frontend/src/components/ProjectCard/index.js
@@ -35,9 +35,11 @@ const ProjectCard = ({ name, summary, ownerName, multiParentName }) => {
           </div>
         </div>
         <Card.Content>
-          <Card.Header data-cy="project-card-name">{name}</Card.Header>
-          <Card.Meta>{ownerName}</Card.Meta>
-          <Card.Description>{summary}</Card.Description>
+          <Card.Header className={styles.cardText} data-cy="project-card-name">
+            {name}
+          </Card.Header>
+          <Card.Meta className={styles.cardText}>{ownerName}</Card.Meta>
+          <Card.Description className={styles.cardText}>{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
@@ -10,3 +10,7 @@
 .card:hover {
   text-decoration: none;
 }
+
+.cardText {
+  overflow-wrap: break-word;
+}