Merge pull request #163 from Web-Dev-Path/fix/blog-tags

Fix Card container tag list on blog page overflow when there are 3 or more tags

Author: mariana-caldas

CHANGELOG.md

@@ -93,3 +93,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - removed unused function in api/register.js
 - adjusted contact form message on mobile
 - blog container and title styling
+- blog card container tags overflowing

components/containers/Card.js

@@ -31,7 +31,7 @@ export default function Card({
       </h2>
       {tagList && tagList.length > 0 ? (
         <div className={styles.tagListContainer}>
-          {tagList.map((tag, i) => (
+          {tagList.slice(0, 8).map((tag, i) => (
             <Tag key={i} text={tag} />
           ))}
         </div>

styles/Card.module.scss

@@ -131,6 +131,9 @@
 
   .tagListContainer {
     display: flex;
+    flex-wrap: wrap;
+    max-height: 12rem;
+    overflow: hidden;
     gap: 0.5rem;
     margin-bottom: -1rem;
   }