Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow blog meta row (category/readtime/date) to wrap on narrow cards

Browse Source 
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.
This commit is contained in:
Marco
2026-08-24 22:53:12 +00:00
parent b6e76ccd22
commit a085a75dea
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/page.tsx
+8 -8
View File
@@ -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"