bug and merge conflicts

Author: tyrelchambers

src/components/ChangelogSnippet/ChangelogCard.astro

@@ -160,19 +160,18 @@ const formattedDate = formatDate(item["date-of-release"])
       const totalImages = images.length
 
       const checkCardHeight = () => {
-        // Determine max height based on viewport
-        const isMobile = window.innerWidth <= 768
-        const wrapperMaxHeight = isMobile ? 300 : 400
+        // Check if wrapper's content exceeds its visible height
+        const wrapperEl = wrapper as HTMLElement
+        const hasOverflow = card.scrollHeight > wrapperEl.clientHeight
 
-        // Check if card exceeds wrapper height
-        if (card.scrollHeight <= wrapperMaxHeight) {
-          // Card fits, hide the button and fade
-          footer.style.opacity = "0"
-          footer.style.pointerEvents = "none"
-        } else {
-          // Card exceeds wrapper, show button and fade
+        if (hasOverflow) {
+          // Content exceeds wrapper, show button and fade
           footer.style.opacity = "1"
           footer.style.pointerEvents = "auto"
+        } else {
+          // Content fits within wrapper, hide the button and fade
+          footer.style.opacity = "0"
+          footer.style.pointerEvents = "none"
         }
       }
 
@@ -199,11 +198,11 @@ const formattedDate = formatDate(item["date-of-release"])
             })
           }
         })
-      } else {
-        // No images, check immediately
-        checkCardHeight()
       }
 
+      // this is needed to make the fade/show more work.
+      setTimeout(checkCardHeight, 2000)
+
       let isExpanded = false
 
       button.addEventListener("click", () => {
@@ -230,12 +229,7 @@ const formattedDate = formatDate(item["date-of-release"])
     })
   }
 
-  // Initialize on page load
-  swapDataAttributeImages()
-  initExpandableCards()
-
-  // Re-initialize after navigation (for SPA-like behavior)
-  document.addEventListener("astro:page-load", () => {
+  document.addEventListener("DOMContentLoaded", () => {
     swapDataAttributeImages()
     initExpandableCards()
   })

src/components/ChangelogSnippet/ChangelogCard.module.css

@@ -16,6 +16,13 @@
   & .card {
     padding: var(--space-4x);
   }
+
+  & ul {
+    padding-left: var(--space-6x);
+  }
+  & li {
+    list-style-type: disc;
+  }
 }
 
 /* Used on individual pages like CCIP/DataFeeds */
@@ -203,9 +210,13 @@
 }
 
 @media screen and (max-width: 768px) {
+  .cardWrapper {
+    max-height: 440px;
+  }
   .card {
     padding: var(--space-4x);
     gap: var(--space-4x);
+    flex-direction: column;
   }
 
   .header {

src/pages/changelog.astro

@@ -69,7 +69,7 @@ const types = logs ? getUniqueTypes(logs) : []
       {
         logs?.map((log, index) => (
           <div class="changelog-item" data-index={index} style={index >= 25 ? "display: none;" : ""}>
-            <ChangelogCard showBorder={false} item={log} />
+            <ChangelogCard showNetworksAndTopic showBorder={false} item={log} />
           </div>
         ))
       }