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

Unify order-list card into a single grid for consistent column alignment

Browse Source 
One grid for the whole card (Bestellnummer/Datum spanning 2 of 4 tracks
from sm: up, everything else spanning 1) instead of two separate flex/grid
groups. Plain flex-wrap sized every field to its own content width, so a
field could start at a different x position from one order to the next
depending on how wide that particular badge 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 consistent
alignment across different orders.
This commit is contained in:
Marco
2026-07-30 13:29:19 +00:00
parent 18f5156fd8
commit 9502cf81b9
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+16 -4
View File
@@ -44,13 +44,25 @@ export default async function KontoBestellungenPage() {
<Link
key={order.orderNumber}
href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
className="flex flex-wrap items-center gap-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-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
>
<div className="flex flex-col gap-1">
{/* One grid for the whole card, not two separate flex/grid
groups — Bestellnummer/Datum each span 2 of the 4
tracks from sm: up, so both rows share the exact same
column boundaries. 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
container width, identical on every card regardless
of content, which is what actually guarantees the
"always starts at the same position" alignment. */}
<div className="col-span-2 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>
</div>
<div className="flex flex-col gap-1">
<div className="col-span-2 flex flex-col gap-1">
<p className="text-label text-text-muted">Datum</p>
<p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
</div>
@@ -66,7 +78,7 @@ 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 ml-auto">
<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>
</div>