fix: update CategoryCard styles and snapshots for improved layout and responsiveness

Kevin Koech · Kevin Koech · commit 46bfe173bd8d · 2025-12-04T18:59:08.000+03:00
diff --git a/apps/trustlab/src/components/CategoryCard/CategoryCard.js b/apps/trustlab/src/components/CategoryCard/CategoryCard.js
@@ -24,6 +24,9 @@ const CategoryCard = forwardRef(function CategoryCard(props, ref) {
         backgroundColor: "transparent",
         img: { filter: "grayscale(100%)" },
         "&:hover img": { filter: "grayscale(0%)" },
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
       }}
       {...other}
     >
@@ -55,22 +58,26 @@ const CategoryCard = forwardRef(function CategoryCard(props, ref) {
           />
         </Box>
       )}
-      <CardContent sx={{ p: 0, mt: 2, textDecoration: "none" }}>
+      <CardContent
+        sx={{
+          p: 0,
+          mt: 2,
+          textDecoration: "none",
+          flex: 1,
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         <Typography sx={{ mt: 1.25, mb: 2 }} variant="h3" gutterBottom>
           {title}
         </Typography>
         {description && (
           <LexicalRichText
             elements={description}
+            sx={{ flex: 1 }}
             TypographyProps={{
               variant: "p2",
-              sx: {
-                display: "-webkit-box",
-                WebkitBoxOrient: "vertical",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                flex: 1,
-              },
             }}
           />
         )}
diff --git a/apps/trustlab/src/components/CategoryCard/CategoryCard.snap.js b/apps/trustlab/src/components/CategoryCard/CategoryCard.snap.js
@@ -2,7 +2,7 @@
 
 exports[`<CategoryCard /> renders unchanged 1`] = `
 <a
-  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-hx403l-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
   href="/test-link"
   style="--Paper-shadow: none;"
 >
@@ -19,21 +19,21 @@ exports[`<CategoryCard /> renders unchanged 1`] = `
     />
   </div>
   <div
-    class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+    class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
   >
     <h3
       class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"
     >
       Test Research Category
     </h3>
     <div
-      class="MuiBox-root css-0"
+      class="MuiBox-root css-1rr4qq7"
     >
       <div
         class="payload-richtext"
       >
         <p
-          class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"
         >
           This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
         </p>
@@ -56,25 +56,25 @@ exports[`<CategoryCard /> renders unchanged 1`] = `
 
 exports[`<CategoryCard /> renders without image 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-167r1gz-MuiPaper-root-MuiCard-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1mlpmcl-MuiPaper-root-MuiCard-root"
   style="--Paper-shadow: none;"
 >
   <div
-    class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+    class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
   >
     <h3
       class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"
     >
       Test Research Category
     </h3>
     <div
-      class="MuiBox-root css-0"
+      class="MuiBox-root css-1rr4qq7"
     >
       <div
         class="payload-richtext"
       >
         <p
-          class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"
         >
           This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
         </p>
@@ -86,7 +86,7 @@ exports[`<CategoryCard /> renders without image 1`] = `
 
 exports[`<CategoryCard /> renders without link 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-167r1gz-MuiPaper-root-MuiCard-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1mlpmcl-MuiPaper-root-MuiCard-root"
   style="--Paper-shadow: none;"
 >
   <div
@@ -102,21 +102,21 @@ exports[`<CategoryCard /> renders without link 1`] = `
     />
   </div>
   <div
-    class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+    class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
   >
     <h3
       class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"
     >
       Test Research Category
     </h3>
     <div
-      class="MuiBox-root css-0"
+      class="MuiBox-root css-1rr4qq7"
     >
       <div
         class="payload-richtext"
       >
         <p
-          class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"
         >
           This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
         </p>
diff --git a/apps/trustlab/src/components/CategoryList/ResearchCategoryList.snap.js b/apps/trustlab/src/components/CategoryList/ResearchCategoryList.snap.js
@@ -11,7 +11,7 @@ exports[`<CategoryList /> renders unchanged 1`] = `
       class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-8o12w-MuiGrid2-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-hx403l-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
         href="/category-1"
         id="1"
         style="--Paper-shadow: none;"
@@ -29,21 +29,21 @@ exports[`<CategoryList /> renders unchanged 1`] = `
           />
         </div>
         <div
-          class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+          class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
         >
           <h3
             class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"
           >
             Research Category 1
           </h3>
           <div
-            class="MuiBox-root css-0"
+            class="MuiBox-root css-1rr4qq7"
           >
             <div
               class="payload-richtext"
             >
               <p
-                class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"
               >
                 This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
               </p>
@@ -67,7 +67,7 @@ exports[`<CategoryList /> renders unchanged 1`] = `
       class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-8o12w-MuiGrid2-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-hx403l-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
         href="/category-2"
         id="2"
         style="--Paper-shadow: none;"
@@ -85,21 +85,21 @@ exports[`<CategoryList /> renders unchanged 1`] = `
           />
         </div>
         <div
-          class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+          class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
         >
           <h3
             class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"
           >
             Research Category 2
           </h3>
           <div
-            class="MuiBox-root css-0"
+            class="MuiBox-root css-1rr4qq7"
           >
             <div
               class="payload-richtext"
             >
               <p
-                class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"
               >
                 This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
               </p>
@@ -123,7 +123,7 @@ exports[`<CategoryList /> renders unchanged 1`] = `
       class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-8o12w-MuiGrid2-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-hx403l-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
         href="/category-3"
         id="3"
         style="--Paper-shadow: none;"
@@ -141,21 +141,21 @@ exports[`<CategoryList /> renders unchanged 1`] = `
           />
         </div>
         <div
-          class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+          class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
         >
           <h3
             class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"
           >
             Research Category 3
           </h3>
           <div
-            class="MuiBox-root css-0"
+            class="MuiBox-root css-1rr4qq7"
           >
             <div
               class="payload-richtext"
             >
               <p
-                class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"
               >
                 This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.
               </p>
diff --git a/apps/trustlab/src/components/ToolkitList/ToolkitList.snap.js b/apps/trustlab/src/components/ToolkitList/ToolkitList.snap.js
@@ -18,7 +18,7 @@ exports[`ToolkitList renders initial toolkits 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-1nwtms1-MuiGrid2-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-87ondj-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-161p3f9-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
               href="/toolkits/a"
               id="t1"
               style="--Paper-shadow: none;"
@@ -36,15 +36,15 @@ exports[`ToolkitList renders initial toolkits 1`] = `
                 />
               </div>
               <div
-                class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+                class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
               >
                 <h3
                   class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1of270-MuiTypography-root"
                 >
                   Toolkit A
                 </h3>
                 <div
-                  class="MuiBox-root css-0"
+                  class="MuiBox-root css-1rr4qq7"
                 >
                   <div
                     class="payload-richtext"
@@ -68,7 +68,7 @@ exports[`ToolkitList renders initial toolkits 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-1nwtms1-MuiGrid2-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-87ondj-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-161p3f9-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
               href="/toolkits/b"
               id="t2"
               style="--Paper-shadow: none;"
@@ -86,15 +86,15 @@ exports[`ToolkitList renders initial toolkits 1`] = `
                 />
               </div>
               <div
-                class="MuiCardContent-root css-wwjmps-MuiCardContent-root"
+                class="MuiCardContent-root css-76n4sy-MuiCardContent-root"
               >
                 <h3
                   class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1of270-MuiTypography-root"
                 >
                   Toolkit B
                 </h3>
                 <div
-                  class="MuiBox-root css-0"
+                  class="MuiBox-root css-1rr4qq7"
                 >
                   <div
                     class="payload-richtext"

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	exports[`<CategoryCard /> renders unchanged 1`] = `
`4`	`4`	`<a`
`5`		`- class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"`
	`5`	`+ class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-hx403l-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"`
`6`	`6`	`href="/test-link"`
`7`	`7`	`style="--Paper-shadow: none;"`
`8`	`8`	`>`
@@ -19,21 +19,21 @@ exports[`<CategoryCard /> renders unchanged 1`] = `
`19`	`19`	`/>`
`20`	`20`	`</div>`
`21`	`21`	`<div`
`22`		`- class="MuiCardContent-root css-wwjmps-MuiCardContent-root"`
	`22`	`+ class="MuiCardContent-root css-76n4sy-MuiCardContent-root"`
`23`	`23`	`>`
`24`	`24`	`<h3`
`25`	`25`	`class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"`
`26`	`26`	`>`
`27`	`27`	`Test Research Category`
`28`	`28`	`</h3>`
`29`	`29`	`<div`
`30`		`- class="MuiBox-root css-0"`
	`30`	`+ class="MuiBox-root css-1rr4qq7"`
`31`	`31`	`>`
`32`	`32`	`<div`
`33`	`33`	`class="payload-richtext"`
`34`	`34`	`>`
`35`	`35`	`<p`
`36`		`- class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"`
	`36`	`+ class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"`
`37`	`37`	`>`
`38`	`38`	`This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.`
`39`	`39`	`</p>`
@@ -56,25 +56,25 @@ exports[`<CategoryCard /> renders unchanged 1`] = `
`56`	`56`
`57`	`57`	exports[`<CategoryCard /> renders without image 1`] = `
`58`	`58`	`<div`
`59`		`- class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-167r1gz-MuiPaper-root-MuiCard-root"`
	`59`	`+ class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1mlpmcl-MuiPaper-root-MuiCard-root"`
`60`	`60`	`style="--Paper-shadow: none;"`
`61`	`61`	`>`
`62`	`62`	`<div`
`63`		`- class="MuiCardContent-root css-wwjmps-MuiCardContent-root"`
	`63`	`+ class="MuiCardContent-root css-76n4sy-MuiCardContent-root"`
`64`	`64`	`>`
`65`	`65`	`<h3`
`66`	`66`	`class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"`
`67`	`67`	`>`
`68`	`68`	`Test Research Category`
`69`	`69`	`</h3>`
`70`	`70`	`<div`
`71`		`- class="MuiBox-root css-0"`
	`71`	`+ class="MuiBox-root css-1rr4qq7"`
`72`	`72`	`>`
`73`	`73`	`<div`
`74`	`74`	`class="payload-richtext"`
`75`	`75`	`>`
`76`	`76`	`<p`
`77`		`- class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"`
	`77`	`+ class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"`
`78`	`78`	`>`
`79`	`79`	`This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.`
`80`	`80`	`</p>`
@@ -86,7 +86,7 @@ exports[`<CategoryCard /> renders without image 1`] = `
`86`	`86`
`87`	`87`	exports[`<CategoryCard /> renders without link 1`] = `
`88`	`88`	`<div`
`89`		`- class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-167r1gz-MuiPaper-root-MuiCard-root"`
	`89`	`+ class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1mlpmcl-MuiPaper-root-MuiCard-root"`
`90`	`90`	`style="--Paper-shadow: none;"`
`91`	`91`	`>`
`92`	`92`	`<div`
@@ -102,21 +102,21 @@ exports[`<CategoryCard /> renders without link 1`] = `
`102`	`102`	`/>`
`103`	`103`	`</div>`
`104`	`104`	`<div`
`105`		`- class="MuiCardContent-root css-wwjmps-MuiCardContent-root"`
	`105`	`+ class="MuiCardContent-root css-76n4sy-MuiCardContent-root"`
`106`	`106`	`>`
`107`	`107`	`<h3`
`108`	`108`	`class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1m50nra-MuiTypography-root"`
`109`	`109`	`>`
`110`	`110`	`Test Research Category`
`111`	`111`	`</h3>`
`112`	`112`	`<div`
`113`		`- class="MuiBox-root css-0"`
	`113`	`+ class="MuiBox-root css-1rr4qq7"`
`114`	`114`	`>`
`115`	`115`	`<div`
`116`	`116`	`class="payload-richtext"`
`117`	`117`	`>`
`118`	`118`	`<p`
`119`		`- class="MuiTypography-root MuiTypography-p2 css-19n1rv3-MuiTypography-root"`
	`119`	`+ class="MuiTypography-root MuiTypography-p2 css-afjcqe-MuiTypography-root"`
`120`	`120`	`>`
`121`	`121`	`This report is a baseline Information Ecosystem Assessment (IEA) of online communities in Kenya, mapping digital harms and malign actors, using the DISARM and D-RAIL frameworks for analysing weaponised hate speech, information manipulation and other forms of illicit influence operations.`
`122`	`122`	`</p>`