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

Move the order-list 2-to-4-column breakpoint from 400px to 500px

Browse Source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 13:56:33 +00:00
parent 80843cc08b
commit 53c452583d
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+5 -5
View File
@@ -44,13 +44,13 @@ export default async function KontoBestellungenPage() {
<Link
key={order.orderNumber}
href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
className="grid grid-cols-2 min-[400px]: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"
className="grid grid-cols-2 min-[500px]: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"
>
{/* 4 columns as soon as there's room for badge labels
like "In Bearbeitung" to fit (>= 400px) — every field
like "In Bearbeitung" to fit (>= 500px) — every field
spans exactly 1 track, so every row shares the exact
same column boundaries regardless of viewport. Below
400px there just isn't room for 4 tracks without
500px there just isn't room for 4 tracks without
badges overflowing their column, so it drops to 2
columns; the 6 fields in DOM order already tile into
exactly Bestellnummer/Datum, Artikel/Status,
@@ -74,11 +74,11 @@ export default async function KontoBestellungenPage() {
instead of Grid auto-flowing it into the 2 empty
cells left in row 1 (harmless no-op in the 2-column
layout, where it's already first in row 2 anyway). */}
<div className="flex flex-col gap-1 col-span-2 min-[400px]:col-span-1">
<div className="flex flex-col gap-1 col-span-2 min-[500px]:col-span-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 col-span-2 min-[400px]:col-span-1">
<div className="flex flex-col gap-1 col-span-2 min-[500px]:col-span-1">
<p className="text-label text-text-muted">Datum</p>
<p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
</div>