ui(carwash): Setup → Car wash as a two-column grid — the master-data card takes the width

The wrapping flex row capped the left card at max-w-2xl; once each category row grew its
camera-class chips it was squeezed while the right side sat empty (user, park-2). Now the
master data takes the remaining width and the sponsorship card keeps a fixed readable
column; stacks on narrow screens.

Claude-Session: https://claude.ai/code/session_01FWncR69HgGPuei1dLrW3cU
This commit is contained in:
2026-09-07 09:38:55 +02:00
parent ef55d1c6a9
commit 3e57af5abc
@@ -199,8 +199,11 @@ export function CarWashSetup({ canEdit }: { canEdit: boolean }) {
const currency = settings?.currency ?? "";
return (
<div className="mt-6 flex flex-wrap items-start gap-6">
<section className="card w-full max-w-2xl p-4">
// Two columns on a wide screen: the master data (categories with their camera-class
// chips, services, the price matrix, policies) takes the room it needs; the sponsorship
// program keeps a fixed, readable width beside it. Stacks on narrow screens.
<div className="mt-6 grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,26rem)]">
<section className="card min-w-0 p-4">
<div className="grid gap-4">
<ListEditor title={t("wash.categories")} items={categories} onChange={setCategories} addLabel={t("wash.addCategory")} visionMap />
<ListEditor title={t("wash.services")} items={services} onChange={setServices} addLabel={t("wash.addService")} />
@@ -274,6 +277,7 @@ export function CarWashSetup({ canEdit }: { canEdit: boolean }) {
{review.enabled
? t("wash.reviewCounts", { queued: review.queued, sent: review.sent, failed: review.failed })
: t("wash.reviewOff")}
{review.enabled && review.entrySample > 0 && <span className="ml-2 text-term-muted">· {t("wash.reviewEntrySample", { n: review.entrySample })}</span>}
{review.enabled && review.lastError && <span className="ml-2 text-term-amber">{review.lastError}</span>}
</span>
<span className="hint">{t("wash.reviewHint")}</span>
@@ -290,7 +294,7 @@ export function CarWashSetup({ canEdit }: { canEdit: boolean }) {
</section>
{canEdit && program && (
<section className="card w-full max-w-md p-4">
<section className="card min-w-0 p-4">
<div className="text-[0.6875rem] uppercase tracking-wider text-term-muted">{t("wash.sponsorship")}</div>
<span className="hint">{t("wash.sponsorshipHint")}</span>
<div className="mt-2">