From b55a3cc322778f6c06879f3ea4493a781f671936 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 5 Sep 2026 21:14:45 +0200
Subject: [PATCH] feat(website): tidy blog card tags and date, show a third
 card on the homepage

The blog card kept the date and every tag in one non-wrapping flex row, so a
post with five or six tags overflowed the card frame and the date broke across
three lines inside the three-column grid. The date now sits on its own
non-wrapping line, tags wrap below it, and only the first three render as chips
while the rest collapse into a "+N" chip whose tooltip lists them. The featured
card still shows every tag.

The homepage rendered two cards under the featured post and left the third grid
column empty; it now shows three.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../website/src/components/BlogPostCard.astro | 46 ++++++++++++-------
 apps/website/src/pages/index.astro            |  5 +-
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/apps/website/src/components/BlogPostCard.astro b/apps/website/src/components/BlogPostCard.astro
index 2731fcc55..eed6fb29a 100644
--- a/apps/website/src/components/BlogPostCard.astro
+++ b/apps/website/src/components/BlogPostCard.astro
@@ -10,6 +10,13 @@ interface Props {
 
 const { title, description, pubDate, slug, tags = [], heroImage } = Astro.props;
 
+// Cards sit in a three-column grid, so a post with five or six tags cannot show
+// them all inline. The first few render as chips; the rest collapse into a "+N"
+// chip whose tooltip lists the hidden tags. The featured card shows every tag.
+const MAX_VISIBLE_TAGS = 3;
+const visibleTags = tags.slice(0, MAX_VISIBLE_TAGS);
+const hiddenTags = tags.slice(MAX_VISIBLE_TAGS);
+
 const formattedDate = pubDate.toLocaleDateString('en-US', {
   year: 'numeric',
   month: 'short',
@@ -31,23 +38,28 @@ const formattedDate = pubDate.toLocaleDateString('en-US', {
       />
     </div>
   )}
-  <div class="flex items-center gap-2">
-    <time datetime={pubDate.toISOString()} class="font-mono text-xs text-surface-500">
-      {formattedDate}
-    </time>
-    {
-      tags.length > 0 && (
-        <>
-          <span class="text-surface-700">&middot;</span>
-          {tags.map((tag) => (
-            <span class="rounded-md border border-surface-800 bg-surface-900/60 px-2 py-0.5 text-xs text-surface-300">
-              {tag}
-            </span>
-          ))}
-        </>
-      )
-    }
-  </div>
+  <time datetime={pubDate.toISOString()} class="block whitespace-nowrap font-mono text-xs text-surface-500">
+    {formattedDate}
+  </time>
+  {
+    tags.length > 0 && (
+      <div class="mt-2 flex flex-wrap gap-1.5">
+        {visibleTags.map((tag) => (
+          <span class="rounded-md border border-surface-800 bg-surface-900/60 px-2 py-0.5 text-xs text-surface-300">
+            {tag}
+          </span>
+        ))}
+        {hiddenTags.length > 0 && (
+          <span
+            class="rounded-md border border-surface-800 bg-surface-900/60 px-2 py-0.5 font-mono text-xs text-surface-500"
+            title={hiddenTags.join(', ')}
+          >
+            +{hiddenTags.length}
+          </span>
+        )}
+      </div>
+    )
+  }
   <h3
     class="mt-3 font-display text-lg font-semibold text-surface-100 transition-colors duration-200 group-hover:text-accent-400"
   >
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index aa2702b01..b0728414d 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -18,8 +18,9 @@ const allPosts = (await getCollection('blog'))
   .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 
 const featuredPost = allPosts.find((post) => post.data.featured) ?? allPosts[0];
-const otherPosts = featuredPost ? allPosts.filter((post) => post.id !== featuredPost.id).slice(0, 2) : [];
-const posts = featuredPost ? [featuredPost, ...otherPosts] : allPosts.slice(0, 3);
+// One featured post plus a full three-column row of cards below it.
+const otherPosts = featuredPost ? allPosts.filter((post) => post.id !== featuredPost.id).slice(0, 3) : [];
+const posts = featuredPost ? [featuredPost, ...otherPosts] : allPosts.slice(0, 4);
 
 const homeSchema = [
   {