From a7576e180ab97021b05062eae25643482c8c7f06 Mon Sep 17 00:00:00 2001 From: jay Date: Mon, 1 Jun 2026 20:54:11 +0000 Subject: [PATCH] Align tile content: reserve a two-row pill zone with a hairline Cards with a third tag that wrapped to a second row pushed their title/source down, breaking alignment across the grid. Reserve a consistent two-row min-height for the tag zone on tiles (pills top-aligned) and close it with a hairline, so titles line up regardless of pill count. Hero opts out. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/src/lib/components/ArticleCard.svelte | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte index 82a8958..59e7a03 100644 --- a/frontend/src/lib/components/ArticleCard.svelte +++ b/frontend/src/lib/components/ArticleCard.svelte @@ -102,6 +102,15 @@ button.tag { cursor: pointer; } button.tag:hover { background: var(--accent-deep); color: #fff; } button.tag.soft:hover { background: var(--accent); color: #fff; } + + /* Reserve room for two rows of pills on tiles so titles always line up + across the grid, whether a card has 1, 2, or 3 tags. A hairline closes + the zone. (The hero is its own layout and opts out.) */ + .tile .tags { + align-items: flex-start; align-content: flex-start; + min-height: 48px; padding-bottom: 11px; margin-bottom: 2px; + border-bottom: 1px solid var(--line); + } /* Source on its own line below the tags, left-justified, for uniformity. */ .src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }