Fix order-list grid: Datum should start in column 2, not 3

This commit is contained in:
Marco
2026-07-30 13:34:34 +00:00
parent 9502cf81b9
commit 84e21589c3
+8 -5
View File
@@ -47,8 +47,8 @@ export default async function KontoBestellungenPage() {
className="grid grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
>
{/* One grid for the whole card, not two separate flex/grid
groups — Bestellnummer/Datum each span 2 of the 4
tracks from sm: up, so both rows share the exact same
groups — every field spans exactly 1 of the 4 tracks
(2 on mobile), so every row shares the exact same
column boundaries. Plain flex-wrap here (as this used
to be) sized every field to its own content width, so
e.g. "Status"/"Zahlungsstatus" started at a different
@@ -57,12 +57,15 @@ export default async function KontoBestellungenPage() {
be — a grid's column tracks are fixed by the
container width, identical on every card regardless
of content, which is what actually guarantees the
"always starts at the same position" alignment. */}
<div className="col-span-2 flex flex-col gap-1">
"always starts at the same position" alignment.
Bestellnummer/Datum deliberately do NOT span 2 tracks
— that would push Datum to start at the 3rd column
instead of the 2nd. */}
<div className="flex flex-col gap-1">
<p className="text-label text-text-muted">Bestellnummer</p>
<p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
</div>
<div className="col-span-2 flex flex-col gap-1">
<div className="flex flex-col gap-1">
<p className="text-label text-text-muted">Datum</p>
<p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
</div>