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

Give Bestellnummer/Datum their own row, group the other 4 fields below

Browse Source 
From 500px up: 4 columns, with Status forced to col-start-1 so
Status/Zahlungsstatus/Artikel/Gesamtbetrag land together in one row
below Bestellnummer/Datum, instead of Grid filling the empty cells
next to Bestellnummer/Datum first.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 19:52:48 +00:00
parent 7c9bfc3897
commit 54725f7c5f
1 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+19 -22
View File
@@ -44,29 +44,26 @@ export default async function KontoBestellungenPage() {
<Link
key={order.orderNumber}
href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
className="grid grid-cols-2 gap-x-3 sm:gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
className="grid grid-cols-2 min-[500px]:grid-cols-4 gap-x-3 sm:gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
>
{/* Always 2 columns, at every viewport width — the 6
fields are ordered Bestellnummer/Datum,
Status/Zahlungsstatus, Artikel/Gesamtbetrag, so a
plain 2-column grid already tiles them into exactly
those 3 pairs: 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. A wider (4-column)
layout was tried first, but then Status/
Zahlungsstatus shared a row with Bestellnummer/Datum
instead of getting their own — 2 columns keeps the
pairing intentional regardless of available width.
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 be — a grid's column tracks are fixed by the
{/* Below 500px: 2 columns — the 6 fields in DOM order
(Bestellnummer/Datum, Status/Zahlungsstatus,
Artikel/Gesamtbetrag) already tile into exactly
those 3 pairs, no forcing needed. From 500px up: 4
columns, with Bestellnummer/Datum on their own row
and Status/Zahlungsstatus/Artikel/Gesamtbetrag
together on the row below — Status forces
min-[500px]:col-start-1 so it wraps to a new row
instead of Grid auto-flowing it into the 2 empty
cells left after Bestellnummer/Datum (a harmless
no-op below 500px, where it's already first in row
2 anyway). 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. */}
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. */}
<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>
@@ -75,7 +72,7 @@ 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">
<div className="flex flex-col gap-1 min-[500px]:col-start-1">
<p className="text-label text-text-muted">Status</p>
<OrderStatusBadge status={order.status} />
</div>