From a085a75dea9c1fd9c583bf03bbeef5728c8726af Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Mon, 24 Aug 2026 22:53:12 +0000
Subject: [PATCH] Allow blog meta row (category/readtime/date) to wrap on
 narrow cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Long category names no longer force horizontal overflow — the row
wraps to a second line instead, with each segment kept from breaking
mid-word via whitespace-nowrap.
---
 app/blog/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 832efdf..e4bd7ce 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -124,12 +124,12 @@ export default async function BlogOverviewPage({
                 )}
               </div>
               <div className="flex flex-col justify-center gap-3 p-8 sm:p-12 min-w-0">
-                <div className="flex items-center gap-2 font-semibold text-text-muted text-body-sm uppercase tracking-wide">
-                  <span>{featured.categories.join(", ")}</span>
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-1 font-semibold text-text-muted text-body-sm uppercase tracking-wide">
+                  <span className="whitespace-nowrap">{featured.categories.join(", ")}</span>
                   <span>•</span>
-                  <span>{featured.readTime} Min</span>
+                  <span className="whitespace-nowrap">{featured.readTime} Min</span>
                   <span>•</span>
-                  <span className="uppercase">{formatDate(featured.publishedAt)}</span>
+                  <span className="uppercase whitespace-nowrap">{formatDate(featured.publishedAt)}</span>
                 </div>
                 <p
                   className="font-semibold text-h-section text-text-primary"
@@ -181,12 +181,12 @@ export default async function BlogOverviewPage({
                     )}
                   </div>
                   <div className="flex flex-col gap-2 min-w-0 flex-1">
-                    <div className="flex items-center gap-2 font-semibold text-text-muted text-body-sm uppercase tracking-wide">
-                      <span>{post.categories.join(", ")}</span>
+                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 font-semibold text-text-muted text-body-sm uppercase tracking-wide">
+                      <span className="whitespace-nowrap">{post.categories.join(", ")}</span>
                       <span>•</span>
-                      <span>{post.readTime} Min</span>
+                      <span className="whitespace-nowrap">{post.readTime} Min</span>
                       <span>•</span>
-                      <span className="uppercase">{formatDate(post.publishedAt)}</span>
+                      <span className="uppercase whitespace-nowrap">{formatDate(post.publishedAt)}</span>
                     </div>
                     <p
                       className="font-semibold text-h-small text-text-primary"