Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorder order-list card fields: badges together, quantities together

Browse Source 
Status/Zahlungsstatus now land in one row (calmer than being split
diagonally across two rows), and Artikel/Gesamtbetrag pair up as the
two "quantity" fields. Also drops the now-unnecessary col-start-1 on
Artikel — Bestellnummer/Datum/Status/Zahlungsstatus already fill all
4 tracks of row 1 exactly with this order, so Grid wraps row 2 on
its own.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 19:48:29 +00:00
parent cca555c0f4
commit 014f1edcdc
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+17 -14
View File
@@ -52,11 +52,13 @@ export default async function KontoBestellungenPage() {
same column boundaries regardless of viewport. Below
500px there just isn't room for 4 tracks without
badges overflowing their column, so it drops to 2
columns; the 6 fields in DOM order already tile into
exactly Bestellnummer/Datum, Artikel/Status,
Zahlungsstatus/Gesamtbetrag without any reordering.
Plain flex-wrap here (as this used to be) sized every
field to its own content width, so e.g.
columns; the 6 fields are ordered Bestellnummer/Datum,
Status/Zahlungsstatus, Artikel/Gesamtbetrag so the two
colored badges land in one row together (visually
calmer than being split across two rows) and
Artikel/Gesamtbetrag pair up as the two "quantity"
fields. 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 x
position from one order card to the next depending on
how wide that particular badge's label happened to
@@ -67,11 +69,12 @@ export default async function KontoBestellungenPage() {
Bestellnummer/Datum deliberately do NOT span 2
tracks in the 2-column layout — that would stack
them into their own full-width row each instead of
keeping them side by side. Artikel forces col-start-1
so it wraps to its own row in the 4-column layout
instead of Grid auto-flowing it into the 2 empty
cells left in row 1 (harmless no-op in the 2-column
layout, where it's already first in row 2 anyway). */}
keeping them side by side. No col-start forcing
needed for Artikel here (unlike the previous field
order) — Bestellnummer/Datum/Status/Zahlungsstatus
already fill all 4 tracks of the first row exactly,
so Grid wraps Artikel/Gesamtbetrag to row 2 on its
own. */}
<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>
@@ -80,10 +83,6 @@ export default async function KontoBestellungenPage() {
<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 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">
<p className="text-label text-text-muted">Status</p>
<OrderStatusBadge status={order.status} />
@@ -92,6 +91,10 @@ export default async function KontoBestellungenPage() {
<p className="text-label text-text-muted">Zahlungsstatus</p>
<PaymentStatusBadge paymentStatus={order.paymentStatus} />
</div>
<div className="flex flex-col gap-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">
<p className="text-label text-text-muted">Gesamtbetrag</p>
<p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>