From 113d25eef927db8e2d2889c7c88287c1b546b8c0 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 21:51:22 +0000
Subject: [PATCH] Order list: center Bestellnummer/Datum row + center footer
 links on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/konto/bestellungen/page.tsx | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index 47a5bc8..56ff795 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -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>