Fix order-list grid: Datum should start in column 2, not 3
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user