From 3e57af5abcb27eb50b5d5d5c71c24048b7e9711a Mon Sep 17 00:00:00 2001
From: Julian Cuni <julian.cuni@microservices.al>
Date: Mon, 7 Sep 2026 09:38:55 +0200
Subject: [PATCH] =?UTF-8?q?ui(carwash):=20Setup=20=E2=86=92=20Car=20wash?=
 =?UTF-8?q?=20as=20a=20two-column=20grid=20=E2=80=94=20the=20master-data?=
 =?UTF-8?q?=20card=20takes=20the=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 apps/web/src/modules/carwash/CarWashSetup.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/modules/carwash/CarWashSetup.tsx b/apps/web/src/modules/carwash/CarWashSetup.tsx
index d903cbd..0339798 100644
--- a/apps/web/src/modules/carwash/CarWashSetup.tsx
+++ b/apps/web/src/modules/carwash/CarWashSetup.tsx
@@ -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">