From 84e21589c3861753ce733a42cdc087ac3d45daa1 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 13:34:34 +0000
Subject: [PATCH] Fix order-list grid: Datum should start in column 2, not 3

---
 app/konto/bestellungen/page.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index e22bf70..8fd189c 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -47,8 +47,8 @@ export default async function KontoBestellungenPage() {
                   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"
                 >
                   {/* 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
+                      groups — every field spans exactly 1 of the 4 tracks
+                      (2 on mobile), so every row shares 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
@@ -57,12 +57,15 @@ export default async function KontoBestellungenPage() {
                       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">
+                      "always starts at the same position" alignment.
+                      Bestellnummer/Datum deliberately do NOT span 2 tracks
+                      — that would push Datum to start at the 3rd column
+                      instead of the 2nd. */}
+                  <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>
                   </div>
-                  <div className="col-span-2 flex flex-col gap-1">
+                  <div className="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>