admin/logbuch
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stack the mark and the type in a row

Browse Source 
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.
This commit is contained in:
Matthias G
2026-08-01 18:41:21 +02:00
parent ea16d7a8ba
commit 06d0184965
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/archive/EntryRow.tsx
+4 -5
View File
@@ -25,8 +25,8 @@ export function EntryRow({ item, showCode = true, highlight, className }: EntryR
href={postPath(item.projectSlug, item.slug)} 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 ?? ''}`} 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="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="shrink-0"> <span className="flex shrink-0 flex-col items-start gap-1.5 self-start">
<Plate <Plate
project={source} project={source}
color={item.projectColor} color={item.projectColor}
@@ -34,11 +34,10 @@ export function EntryRow({ item, showCode = true, highlight, className }: EntryR
size="row" size="row"
showNumber={showCode} showNumber={showCode}
/> />
<Badge type={item.type} />
<span className="sr-only">{t('number', { number: item.number })}</span> <span className="sr-only">{t('number', { number: item.number })}</span>
</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"> <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} /> <Highlight text={item.title} query={highlight} />
</span> </span>
@@ -51,7 +50,7 @@ export function EntryRow({ item, showCode = true, highlight, className }: EntryR
<span aria-hidden="true" className="hidden lg:block" /> <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.publishAt ? <EntryDate date={item.publishAt} /> : null}
{item.authorName ? <AuthorMark name={item.authorName} /> : null} {item.authorName ? <AuthorMark name={item.authorName} /> : null}
</span> </span>
src/components/ui/Plate.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const shells: Record<PlateSize, string> = {
lead: 'flex min-h-44 flex-col justify-between gap-8 px-5 py-4', 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', 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', 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> = { const codeSizes: Record<PlateSize, string> = {