Fix order-list card: explicitly pin every cell's row+column
Root cause of the "still left-packed" report: mixing `order` with only some items explicitly positioned (col-start on Bestellnummer/Artikel) is a footgun — Grid's auto-placement cursor for the un-pinned items (Datum, Status, Zahlungsstatus, Gesamtbetrag) starts scanning from column 1 again regardless of what's already explicitly placed elsewhere, so Datum landed back in column 1 instead of column 3. Every cell now gets an explicit row-start+col-start, removing the ambiguity entirely. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
@@ -49,60 +49,48 @@ export default async function KontoBestellungenPage() {
|
||||
{/* Below sm (640px): 2 columns, plain DOM order —
|
||||
Bestellnummer/Datum, Status/Zahlungsstatus,
|
||||
Artikel/Gesamtbetrag tile into exactly those 3 pairs
|
||||
on their own, no reordering needed. From sm up: 4
|
||||
columns, with
|
||||
Bestellnummer/Datum on their own row and
|
||||
Artikel/Status/Zahlungsstatus/Gesamtbetrag together
|
||||
on the row below, in that order — done via
|
||||
sm:order-* rather than changing the actual
|
||||
DOM order, so the mobile pairing above stays
|
||||
untouched. Artikel carries both order-3 (first in
|
||||
the second row) and col-start-1 (so it actually
|
||||
wraps to a new row instead of Grid auto-flowing it
|
||||
into the 2 empty cells left after Bestellnummer/
|
||||
Datum) — order alone only controls placement
|
||||
sequence, not which row/column an item lands in. A
|
||||
grid's column tracks are fixed by the container
|
||||
width, identical on every card regardless of
|
||||
content — unlike the plain flex-wrap this used to
|
||||
be, where e.g. "Status"/"Zahlungsstatus" started at
|
||||
a different x position from one order card to the
|
||||
next depending on how wide that particular badge's
|
||||
label happened to be.
|
||||
|
||||
Bestellnummer additionally forces sm:col-start-2 —
|
||||
without it, the top row's 2 items (only spanning 2
|
||||
of the 4 tracks) pack flush left with all the
|
||||
leftover space on the right, an asymmetric margin
|
||||
against the card's edges. Starting Bestellnummer at
|
||||
column 2 instead of 1 centers that pair within the
|
||||
row (column 1 and column 4 both stay empty), while
|
||||
each cell's own content (the label/value pair) stays
|
||||
left-aligned within itself. Datum needs no override
|
||||
of its own — with column 2 already taken, its
|
||||
order-2 auto-places it into column 3, the next open
|
||||
cell. */}
|
||||
<div className="flex flex-col gap-1 sm:order-1 sm:col-start-2">
|
||||
on their own, no explicit placement needed. From sm
|
||||
up: 4 columns, every cell explicitly pinned to a
|
||||
row+column (sm:row-start-N sm:col-start-N) rather
|
||||
than relying on `order` + Grid's auto-placement —
|
||||
mixing `order` with only SOME items explicitly
|
||||
positioned is a real footgun: the auto-placement
|
||||
cursor for the un-pinned items starts scanning from
|
||||
column 1 again regardless of what's already
|
||||
explicitly placed elsewhere, so Datum (previously
|
||||
auto-placed, relying on Bestellnummer's explicit
|
||||
col-start-2 to "push" it to column 3) actually
|
||||
landed back in column 1 — same visual bug as before
|
||||
this whole pass (left-packed, empty space on the
|
||||
right), just for a different reason than the
|
||||
original flex-wrap issue. Pinning every cell's row
|
||||
AND column explicitly removes that ambiguity
|
||||
entirely. Row 1: Bestellnummer/Datum centered in
|
||||
columns 2-3 (columns 1 and 4 both empty, symmetric
|
||||
margins) — each cell's own content still
|
||||
left-aligned within itself. Row 2: Artikel/Status/
|
||||
Zahlungsstatus/Gesamtbetrag fill all 4 columns. */}
|
||||
<div className="flex flex-col gap-1 sm:row-start-1 sm:col-start-2">
|
||||
<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="flex flex-col gap-1 sm:order-2">
|
||||
<div className="flex flex-col gap-1 sm:row-start-1 sm:col-start-3">
|
||||
<p className="text-label text-text-muted">Datum</p>
|
||||
<p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 sm:order-4">
|
||||
<div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-2">
|
||||
<p className="text-label text-text-muted">Status</p>
|
||||
<OrderStatusBadge status={order.status} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 sm:order-5">
|
||||
<div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-3">
|
||||
<p className="text-label text-text-muted">Zahlungsstatus</p>
|
||||
<PaymentStatusBadge paymentStatus={order.paymentStatus} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 sm:order-3 sm:col-start-1">
|
||||
<div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-1">
|
||||
<p className="text-label text-text-muted">Artikel</p>
|
||||
<p className="text-body-sm text-text-primary">{order.itemCount}</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 sm:order-6">
|
||||
<div className="flex flex-col gap-1 sm:row-start-2 sm:col-start-4">
|
||||
<p className="text-label text-text-muted">Gesamtbetrag</p>
|
||||
<p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user