From fd4229df8367e876dba6a31ab3dbe6ac8bf6d35b Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 1 Jun 2026 21:10:52 +0000
Subject: [PATCH] Reliably center pills: wrap in a row, column-flex
 justify-center
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/lib/components/ArticleCard.svelte     | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index 69718e0..110f366 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -41,13 +41,15 @@
 
   <div class="body">
     <div class="tags">
-      {#each pills as t, i (t)}
-        {#if ontag}
-          <button type="button" class="tag" class:soft={i > 0} onclick={() => ontag(t)}>{humanize(t)}</button>
-        {:else}
-          <span class="tag" class:soft={i > 0}>{humanize(t)}</span>
-        {/if}
-      {/each}
+      <div class="pillrow">
+        {#each pills as t, i (t)}
+          {#if ontag}
+            <button type="button" class="tag" class:soft={i > 0} onclick={() => ontag(t)}>{humanize(t)}</button>
+          {:else}
+            <span class="tag" class:soft={i > 0}>{humanize(t)}</span>
+          {/if}
+        {/each}
+      </div>
     </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; }
-  .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 {
     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;
@@ -106,14 +109,13 @@
   /* 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.) */
+  /* 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 {
-    align-items: center; align-content: center;
-    /* 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);
+    flex-direction: column; justify-content: center; align-items: flex-start;
+    min-height: 64px; 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; }