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

Keep the order-list card at 2 columns always, drop the 4-column breakpoint

Browse Source 
With the badges-together/quantities-together field order, 4 columns at
wider viewports put Status/Zahlungsstatus in the same row as
Bestellnummer/Datum instead of their own row. Plain 2 columns at every
width keeps the intended pairing regardless of available space.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 19:51:22 +00:00
parent 014f1edcdc
commit 7c9bfc3897
1 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+19 -27
View File
@@ -44,37 +44,29 @@ export default async function KontoBestellungenPage() {
<Link
key={order.orderNumber}
href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
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"
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"
>
{/* 4 columns as soon as there's room for badge labels
like "In Bearbeitung" to fit (>= 500px) — every field
spans exactly 1 track, so every row shares the exact
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 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.
{/* 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
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
container width, identical on every card regardless
of content, which is what actually guarantees the
"always starts at the same position" alignment.
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. 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. */}
"always starts at the same position" alignment. */}
<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>