thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the pill zone room for even, centered margins

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-01 21:05:50 +00:00
parent 37c23b634a
commit 1e591f90c5
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+5 -2
View File
@@ -108,8 +108,11 @@
the zone. (The hero is its own layout and opts out.) */ the zone. (The hero is its own layout and opts out.) */
.tile .tags { .tile .tags {
align-items: center; align-content: center; align-items: center; align-content: center;
min-height: 54px; /* fully contains two rows of pills, so every card's /* Comfortably taller than two rows of pills, so the wrapped (3-pill) case
tag zone is the same height regardless of pill count */ 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); border-bottom: 1px solid var(--line);
} }
/* Source on its own line below the tags, left-justified, for uniformity. */ /* Source on its own line below the tags, left-justified, for uniformity. */