From 9502cf81b94b7a35e787376a891e8b7460510938 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 13:29:19 +0000
Subject: [PATCH] Unify order-list card into a single grid for consistent
 column alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index afc5242..e22bf70 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -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>