From 06d01849651757ab51dd80be8ab1197fe48dfecc Mon Sep 17 00:00:00 2001
From: Matthias G <matthias.giesselmann@pocket-rocket.io>
Date: Sat, 1 Aug 2026 18:41:21 +0200
Subject: [PATCH] Stack the mark and the type in a row

The plate and the type sat next to each other and ate the width the title
needed. Now they sit under one another, and the plate itself lost the wide
gap between code and number.
---
 src/components/archive/EntryRow.tsx | 9 ++++-----
 src/components/ui/Plate.tsx         | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/archive/EntryRow.tsx b/src/components/archive/EntryRow.tsx
index f70c9fe..2ef83fb 100644
--- a/src/components/archive/EntryRow.tsx
+++ b/src/components/archive/EntryRow.tsx
@@ -25,8 +25,8 @@ export function EntryRow({ item, showCode = true, highlight, className }: EntryR
 			href={postPath(item.projectSlug, item.slug)}
 			className={`group flex items-stretch gap-4 border-b border-rule py-3 no-underline last:border-b-0 ${className ?? ''}`}
 		>
-			<span className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-4 gap-y-1 transition-transform duration-120 group-hover:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0 lg:grid lg:grid-cols-[7rem_9rem_minmax(0,1fr)_minmax(0,16rem)_9rem] lg:items-center lg:gap-x-5">
-				<span className="shrink-0">
+			<span className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-4 gap-y-1 transition-transform duration-120 group-hover:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0 lg:grid lg:grid-cols-[7rem_minmax(0,1fr)_minmax(0,16rem)_9rem] lg:items-start lg:gap-x-5">
+				<span className="flex shrink-0 flex-col items-start gap-1.5 self-start">
 					<Plate
 						project={source}
 						color={item.projectColor}
@@ -34,11 +34,10 @@ export function EntryRow({ item, showCode = true, highlight, className }: EntryR
 						size="row"
 						showNumber={showCode}
 					/>
+					<Badge type={item.type} />
 					<span className="sr-only">{t('number', { number: item.number })}</span>
 				</span>
 
-				<Badge type={item.type} className="shrink-0" />
-
 				<span className="min-w-0 flex-1 basis-full font-display text-lead font-semibold leading-snug text-balance text-ink lg:basis-auto">
 					<Highlight text={item.title} query={highlight} />
 				</span>
@@ -51,7 +50,7 @@ export function EntryRow({ item, showCode = true, highlight, className }: EntryR
 					<span aria-hidden="true" className="hidden lg:block" />
 				)}
 
-				<span className="ml-auto flex shrink-0 items-center gap-2 font-mono text-small text-ink-3 lg:ml-0 lg:justify-end">
+				<span className="ml-auto flex shrink-0 items-center gap-2 font-mono text-small text-ink-3 lg:ml-0 lg:justify-end lg:pt-0.5">
 					{item.publishAt ? <EntryDate date={item.publishAt} /> : null}
 					{item.authorName ? <AuthorMark name={item.authorName} /> : null}
 				</span>
diff --git a/src/components/ui/Plate.tsx b/src/components/ui/Plate.tsx
index a4c414c..af2f36a 100644
--- a/src/components/ui/Plate.tsx
+++ b/src/components/ui/Plate.tsx
@@ -30,7 +30,7 @@ const shells: Record<PlateSize, string> = {
 	lead: 'flex min-h-44 flex-col justify-between gap-8 px-5 py-4',
 	mark: 'flex flex-col justify-between gap-3 px-3 py-2.5',
 	card: 'flex flex-col justify-between gap-1 px-2 py-1.5',
-	row: 'inline-flex items-baseline gap-2.5 px-2 py-1',
+	row: 'inline-flex items-baseline gap-1.5 px-2 py-1',
 }
 
 const codeSizes: Record<PlateSize, string> = {