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

Reliably center pills: wrap in a row, column-flex justify-center

Browse Source 
align-content:center is unreliable on wrap containers (a single wrapped line is
treated as single-line and ignored), which left pills top-aligned. Wrap the pills
in a .pillrow and vertically center that block with a column flex +
justify-content:center on the fixed-height zone — no single-line ambiguity. Pills
now sit evenly centered for 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:10:52 +00:00
parent 1e591f90c5
commit fd4229df83
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+17 -15
View File
@@ -41,13 +41,15 @@
<div class="body"> <div class="body">
<div class="tags"> <div class="tags">
{#each pills as t, i (t)} <div class="pillrow">
{#if ontag} {#each pills as t, i (t)}
<button type="button" class="tag" class:soft={i > 0} onclick={() => ontag(t)}>{humanize(t)}</button> {#if ontag}
{:else} <button type="button" class="tag" class:soft={i > 0} onclick={() => ontag(t)}>{humanize(t)}</button>
<span class="tag" class:soft={i > 0}>{humanize(t)}</span> {:else}
{/if} <span class="tag" class:soft={i > 0}>{humanize(t)}</span>
{/each} {/if}
{/each}
</div>
</div> </div>
<div class="src">{article.source}</div> <div class="src">{article.source}</div>
@@ -91,7 +93,8 @@
} }
.body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .tags { display: flex; align-items: center; }
.pillrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tag { .tag {
background: var(--accent); color: #fff; border: none; border-radius: 999px; background: var(--accent); color: #fff; border: none; border-radius: 999px;
padding: 3px 11px 2px; font-family: var(--label); font-weight: 300; font-size: 0.66rem; padding: 3px 11px 2px; font-family: var(--label); font-weight: 300; font-size: 0.66rem;
@@ -106,14 +109,13 @@
/* Reserve room for two rows of pills on tiles so titles always line up /* 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 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.) */ the zone. (The hero is its own layout and opts out.) */
/* Vertically center the pill row inside a fixed-height zone using a column
flex + justify-content (no align-content single-line quirk). Comfortably
taller than two rows so the 3-pill case keeps even margins; 1-, 2-, and
3-pill cards all sit symmetrically and their dividers/titles line up. */
.tile .tags { .tile .tags {
align-items: center; align-content: center; flex-direction: column; justify-content: center; align-items: flex-start;
/* Comfortably taller than two rows of pills, so the wrapped (3-pill) case min-height: 64px; border-bottom: 1px solid var(--line);
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. */ /* Source on its own line below the tags, left-justified, for uniformity. */
.src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; } .src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }