refactor(HubContentGrid): implement masonry layout (#66)

## Why:
The current implementation of the hub content grid is not displaying the
grid on a masonry layout (i.e. variable row heights and content cards
side by side), which is not working as intended.
## How:
By implementing a masonry grid layout with
[react-masonry-css](https://www.npmjs.com/package/react-masonry-css) and
caping height and setting `overflow: scroll` to achieve a smooth /
complete scrollable content grid with masonry effect.

Also introduces styling improvements to content cards.
## Demonstration:

![masonry](https://github.com/user-attachments/assets/735600a8-dc4c-4041-a616-7dc29fb4f2ec)

package.json

@@ -69,6 +69,7 @@
     "react": "^19.0.0-rc-09111202-20241011",
     "react-dom": "^19.0.0-rc-09111202-20241011",
     "react-hook-form": "7.45.4",
+    "react-masonry-css": "^1.0.16",
     "react-share": "^5.1.0",
     "react-youtube": "^10.1.0",
     "sharp": "0.32.6",

src/app/_blocks/HubContentGrid/index.tsx

@@ -7,6 +7,7 @@ import { ContentTypeArrays } from "../../_interfaces/ContentTypeArrays";
 import { filterContent } from "../../_utilities/filterContent";
 import ContentNavBar from "./NavBar";
 import styles from "./styles.module.css";
+import Masonry from "react-masonry-css";
 
 const colorMap = {
   All: "var(--dark-rock-800)",
@@ -32,18 +33,28 @@ export default function HubContentGrid({ content }) {
 
   const filteredContent = filterContent({ articles: content, filter: activeButton });
 
+  const breakpointColumns = {
+    default: 4,
+    1280: 3,
+    1024: 2,
+    720: 1,
+  }
 
   return (
     <div>
       <ContentNavBar activeButton={activeButton} onActiveButtonChange={handleActiveButtonChange} />
       <div className={styles.contentGridContainer} style={dynamicStyles}>
-        <div className={styles.contentGrid}>
+        <Masonry
+          breakpointCols={breakpointColumns}
+          className={styles.contentGrid}
+          columnClassName={styles.contentGridColumn}
+        >
           {filteredContent.map((article, i) => (
             <div className={styles.contentCard}>
               <ContentCard contentType={article.contentType} content={article.content} rounded={false} />
             </div>
           ))}
-        </div>
+        </Masonry>
       </div>
     </div>
   );

src/app/_blocks/HubContentGrid/styles.module.css

@@ -31,7 +31,14 @@
 
 @media(min-width: 1024px) {
   .contentGrid {
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    max-height: 1200px;
+    overflow: scroll;
+  }
+
+  .contentGridColumn {
+    background-clip: padding-box;
+
   }
 
   .contentGridContainer {

src/app/_components/ArchiveButton/styles.module.css

@@ -3,4 +3,6 @@
   gap: 10px;
   align-items: center;
   padding-top: 10px;
+  font-size: 16px;
+  margin-bottom: 16px;
 }

src/app/_components/ContentCard/styles.module.css

@@ -1,8 +1,19 @@
 .contentCard {
+  display: flex;
   padding: 30px 20px;
-  height: min-content;
   border: 1px solid var(--dark-rock-800);
   border-radius: var(--dynamic-border);
+  gap: 20px;
+}
+
+.contentCard p {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-height: 1.2em;
+  max-height: calc(1.2em * 3);
+  text-overflow: ellipsis;
 }
 
 .contentMetaContainer {
@@ -12,6 +23,7 @@
 }
 
 .contentMetaContainer h6 {
+  margin-bottom: 10px;
   text-decoration: none;
   transition: text-decoration 0.3s ease;
 }
@@ -34,8 +46,9 @@
 
 .imageContainer {
   position: relative;
-  width: 280px;
-  height: 280px;
+  max-width: 280px;
+  max-height: 280px;
+  aspect-ratio: 1 / 1;
   margin: auto;
 }
 

yarn.lock

@@ -8990,6 +8990,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-masonry-css@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-onclickoutside@^6.13.0:
   version "6.13.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz#1f5e0241c08784b6e65745d91aca0d700c548a89"