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

Order-list card: move breakpoint from 500px to sm (640px)

Browse Source 
Consistency with the site's structural sm: breakpoint elsewhere.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 21:48:07 +00:00
parent 7ce8d02afe
commit 9024112d88
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+13 -12
View File
@@ -44,16 +44,17 @@ 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 sm: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"
>
{/* Below 500px: 2 columns, plain DOM order — Bestellnummer/
Datum, Status/Zahlungsstatus, Artikel/Gesamtbetrag
tile into exactly those 3 pairs on their own, no
reordering needed. From 500px up: 4 columns, with
{/* 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
min-[500px]:order-* rather than changing the actual
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
@@ -68,27 +69,27 @@ export default async function KontoBestellungenPage() {
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 min-[500px]:order-1">
<div className="flex flex-col gap-1 sm:order-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="flex flex-col gap-1 min-[500px]:order-2">
<div className="flex flex-col gap-1 sm:order-2">
<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 min-[500px]:order-4">
<div className="flex flex-col gap-1 sm:order-4">
<p className="text-label text-text-muted">Status</p>
<OrderStatusBadge status={order.status} />
</div>
<div className="flex flex-col gap-1 min-[500px]:order-5">
<div className="flex flex-col gap-1 sm:order-5">
<p className="text-label text-text-muted">Zahlungsstatus</p>
<PaymentStatusBadge paymentStatus={order.paymentStatus} />
</div>
<div className="flex flex-col gap-1 min-[500px]:order-3 min-[500px]:col-start-1">
<div className="flex flex-col gap-1 sm:order-3 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 min-[500px]:order-6">
<div className="flex flex-col gap-1 sm:order-6">
<p className="text-label text-text-muted">Gesamtbetrag</p>
<p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
</div>