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

Keep the order-list card at 4 columns on all screen sizes

Browse Source 
Drop the responsive grid-cols-2/4 switch entirely — stay in the
4-column layout even on the narrowest mobile widths, with a tighter
column gap below sm to help it fit.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 13:49:16 +00:00
parent 5d588c55b4
commit 1fe1a260e4
1 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+13 -17
View File
@@ -44,29 +44,25 @@ export default async function KontoBestellungenPage() {
<Link
key={order.orderNumber}
href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
className="grid grid-cols-2 lg: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"
className="grid grid-cols-4 gap-x-3 sm: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 — every field spans exactly 1 of the 4 tracks
(2 below lg), 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
x position from one order card to the next depending
on how wide that particular badge's label happened to
{/* Always 4 columns, even on the narrowest mobile widths
— every field spans exactly 1 track, so every row
shares the exact same column boundaries regardless of
viewport. 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.
Bestellnummer/Datum deliberately do NOT span 2 tracks
— that would push Datum to start at the 3rd column
instead of the 2nd. Artikel forces lg:col-start-1 so
it wraps to its own row instead of Grid auto-flowing
it into the 2 empty cells left in row 1. The
breakpoint is lg (1024px) so the 2-column layout
stays for the whole mobile/tablet range and only
switches to 4 columns once there's real desktop
width to fit it. */}
instead of the 2nd. Artikel forces col-start-1 so it
wraps to its own row instead of Grid auto-flowing it
into the 2 empty cells left in row 1. */}
<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>
@@ -75,7 +71,7 @@ export default async function KontoBestellungenPage() {
<p className="text-label text-text-muted">Datum</p>
<p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
</div>
<div className="flex flex-col gap-1 lg:col-start-1">
<div className="flex flex-col gap-1 col-start-1">
<p className="text-label text-text-muted">Artikel</p>
<p className="text-body-sm text-text-primary">{order.itemCount}</p>
</div>