adjust tyling

Author: tyrelchambers

src/components/ChangelogSnippet/ChangelogCard.astro

@@ -2,6 +2,7 @@
 import { SvgTaillessArrowDownSmall, Typography } from "@chainlink/blocks"
 import styles from "./ChangelogCard.module.css"
 import type { ChangelogItem } from "./types"
+import { clsx } from "~/lib/clsx/clsx"
 
 interface Props {
   item: ChangelogItem
@@ -23,7 +24,7 @@ const formatDate = (dateString: string) => {
 const formattedDate = formatDate(item["date-of-release"])
 ---
 
-<div class={showBorder ? styles.cardWrapperWithBorder : styles.cardWrapper} data-expandable="wrapper">
+<div class={clsx(styles.cardWrapper, showBorder && styles.withBorder)} data-expandable="wrapper">
   <div class={styles.card} data-expandable="card">
     <div class={styles.header}>
       <div class={styles.metaSection}>

src/components/ChangelogSnippet/ChangelogCard.module.css

@@ -8,17 +8,14 @@
   &:hover {
     background-color: var(--gray-50);
   }
-}
 
-.cardWrapper,
-.cardWrapperWithBorder {
   & .card {
     padding: var(--space-6x);
   }
 }
 
 /* Used on individual pages like CCIP/DataFeeds */
-.cardWrapperWithBorder {
+.cardWrapper.withBorder {
   border: 1px solid var(--border);
 
   &:hover {
@@ -32,12 +29,12 @@
   gap: 82px;
 }
 
-.cardWrapperWithBorder.expanded .card {
+.cardWrapper.withBorder.expanded .card {
   -webkit-mask-image: none;
   mask-image: none;
 }
 
-.cardWrapperWithBorder:hover {
+.cardWrapper.withBorder:hover {
   & .contentFooter {
     background: linear-gradient(to top, var(--muted) 50%, transparent);
   }