From 1e591f90c55156f5792f41f368203c1be6f8ec4c Mon Sep 17 00:00:00 2001 From: jay Date: Mon, 1 Jun 2026 21:05:50 +0000 Subject: [PATCH] Give the pill zone room for even, centered margins 54px barely cleared two rows, so 3-pill cards filled the zone edge-to-edge while 1-pill rows had slack. Raise the zone to 64px so the wrapped case keeps symmetric top/bottom margins; centering then reads evenly across 1-, 2-, and 3-pill cards. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/src/lib/components/ArticleCard.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte index aac9de6..69718e0 100644 --- a/frontend/src/lib/components/ArticleCard.svelte +++ b/frontend/src/lib/components/ArticleCard.svelte @@ -108,8 +108,11 @@ the zone. (The hero is its own layout and opts out.) */ .tile .tags { align-items: center; align-content: center; - min-height: 54px; /* fully contains two rows of pills, so every card's - tag zone is the same height regardless of pill count */ + /* Comfortably taller than two rows of pills, so the wrapped (3-pill) case + still gets even margins top and bottom rather than filling edge-to-edge. + With centering, 1-, 2-, and 3-pill cards all sit symmetrically and their + dividers/titles line up. */ + min-height: 64px; border-bottom: 1px solid var(--line); } /* Source on its own line below the tags, left-justified, for uniformity. */