From e8c4bb6e8b84bb146268585d5976cf2623c4851b Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Sun, 31 May 2026 00:04:50 +0000
Subject: [PATCH] Even out card heights: description only on hero, clamp lane
 card text

Text-first lane cards were rendering the full source description, ballooning
them to several times the height of image cards.
- Show the source description only on the hero; lane/grid cards show title + the
  one-sentence 'why', which is a tidy uniform summary.
- Line-clamp lane card titles and 'why' to 3 lines (hero description to 6) so
  variable text length can't blow up a card. Rows now stay even.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/ArticleCard.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index 9566935..9957243 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -37,7 +37,7 @@
 
     <h3><a href={safeHref} target="_blank" rel="noopener">{article.title}</a></h3>
 
-    {#if (hero || !hasImg) && article.description}
+    {#if hero && article.description}
       <p class="desc">{article.description}</p>
     {/if}
 
@@ -88,6 +88,16 @@
     margin: 2px 0 0; font-style: italic; color: var(--muted);
     font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--sage-soft);
   }
+  /* Keep card heights even: clamp variable-length text on lane/grid cards. */
+  article:not(.hero):not(.herotype) h3,
+  .why {
+    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
+    -webkit-line-clamp: 3;
+  }
+  .hero .desc, .herotype .desc {
+    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
+    -webkit-line-clamp: 6;
+  }
   .actions { margin-top: auto; padding-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
   .actions button {
     background: none; border: none; padding: 0; color: var(--muted);