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

Align tile content: reserve a two-row pill zone with a hairline

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-01 20:54:11 +00:00
parent 3f2c73b210
commit a7576e180a
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+9
View File
@@ -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; }