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

Order list: center Bestellnummer/Datum row + center footer links on mobile

Browse Source 
Bestellnummer now forces sm:col-start-2 so the top row's 2 items
(only spanning 2 of 4 tracks) center within the row instead of
packing flush left with all the leftover space on the right.

The Profil/Weiter einkaufen/Abmelden links row now centers itself
(self-center) below sm, matching the rest of the page's alignment
from sm up — shrink-to-fit width preserved, doesn't stretch full width.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 21:51:22 +00:00
parent 785c1e6eba
commit 113d25eef9
1 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+23 -3
View File
@@ -68,8 +68,21 @@ export default async function KontoBestellungenPage() {
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 sm:order-1">
label happened to be.
Bestellnummer additionally forces sm:col-start-2 —
without it, the top row's 2 items (only spanning 2
of the 4 tracks) pack flush left with all the
leftover space on the right, an asymmetric margin
against the card's edges. Starting Bestellnummer at
column 2 instead of 1 centers that pair within the
row (column 1 and column 4 both stay empty), while
each cell's own content (the label/value pair) stays
left-aligned within itself. Datum needs no override
of its own — with column 2 already taken, its
order-2 auto-places it into column 3, the next open
cell. */}
<div className="flex flex-col gap-1 sm:order-1 sm:col-start-2">
<p className="text-label text-text-muted">Bestellnummer</p>
<p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
</div>
@@ -98,7 +111,14 @@ export default async function KontoBestellungenPage() {
</div>
)}
<div className="flex gap-6">
{/* self-center below sm — this row otherwise inherits the parent
Reveal's items-start (left-aligned); centered here per its
own request, but only the row itself (self-center keeps its
shrink-to-fit content width, doesn't stretch it to the full
parent width the way w-full/justify-center on the parent
would). Back to left-aligned (matching the rest of the page)
from sm up. */}
<div className="flex gap-6 self-center sm:self-start">
<Link href="/konto/profil" className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
Profil &amp; Adresse
</Link>