update

frontend/src/pages/Deals.jsx

@@ -240,79 +240,100 @@ function PipelineDealCard({ deal, openDeal }) {
     );
 }
 
-function PipelineBoard({ columns, openDeal, patchDeal, createDeal, createBusy }) {
+function PipelineStageColumn({ col, openDeal, patchDeal, createDeal, createBusy, columnClassName }) {
+    const sumDeal = sumNumeric(col.deals, 'deal_value');
+    const headerBg = PIPELINE_HEADER_BG[col.value] || 'bg-slate-600';
     return (
         <div
             className={cn(
-                'min-h-[min(75vh,720px)] w-full min-w-0 gap-2 pb-2 pt-1 [scrollbar-gutter:stable]',
-                /* Equal-width columns on lg+ so all stages fit; below lg: narrower columns + horizontal scroll */
-                'flex overflow-x-auto lg:grid lg:grid-cols-6 lg:overflow-visible lg:gap-2'
+                'flex min-h-0 flex-col rounded-xl border border-slate-200 bg-slate-100/90 shadow-sm',
+                columnClassName
             )}
+            onDragOver={(e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+            }}
+            onDrop={(e) => {
+                e.preventDefault();
+                const raw =
+                    e.dataTransfer.getData('application/deal-id') ||
+                    e.dataTransfer.getData('text/plain');
+                const id = Number(raw);
+                if (!Number.isFinite(id)) return;
+                patchDeal(id, { stage: col.value });
+            }}
         >
-            {columns.map((col) => {
-                const sumDeal = sumNumeric(col.deals, 'deal_value');
-                const headerBg = PIPELINE_HEADER_BG[col.value] || 'bg-slate-600';
-                return (
-                    <div
-                        key={col.value}
-                        className={cn(
-                            'flex shrink-0 flex-col rounded-xl border border-slate-200 bg-slate-100/90 shadow-sm',
-                            'min-w-[200px] w-[200px] max-w-[220px]',
-                            'lg:min-w-0 lg:w-auto lg:max-w-none'
-                        )}
-                        onDragOver={(e) => {
-                            e.preventDefault();
-                            e.dataTransfer.dropEffect = 'move';
-                        }}
-                        onDrop={(e) => {
-                            e.preventDefault();
-                            const raw =
-                                e.dataTransfer.getData('application/deal-id') ||
-                                e.dataTransfer.getData('text/plain');
-                            const id = Number(raw);
-                            if (!Number.isFinite(id)) return;
-                            patchDeal(id, { stage: col.value });
-                        }}
+            <div
+                className={cn(
+                    'relative shrink-0 px-2.5 pb-3 pt-2.5 text-white shadow-sm sm:px-3',
+                    headerBg
+                )}
+                style={pipelineHeaderClip}
+            >
+                <div className="flex items-start justify-between gap-2 pr-5">
+                    <span className="text-[12px] font-bold leading-tight tracking-wide sm:text-[13px]">
+                        {col.label}
+                    </span>
+                    <span className="shrink-0 rounded-full bg-black/15 px-2 py-0.5 text-xs font-bold tabular-nums">
+                        {col.deals.length}
+                    </span>
+                </div>
+                <div className="mt-2 text-xs font-semibold tabular-nums text-white/95">{fmtMoney(sumDeal)}</div>
+            </div>
+            <div className="flex max-h-[min(62vh,560px)] min-h-[120px] flex-1 flex-col gap-2 overflow-y-auto p-2">
+                {col.deals.map((deal) => (
+                    <PipelineDealCard key={deal.id} deal={deal} openDeal={openDeal} />
+                ))}
+                <div className="mt-auto shrink-0 pt-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-full justify-center text-violet-700 hover:bg-violet-50"
+                        disabled={createBusy}
+                        onClick={() => createDeal(col.value)}
                     >
-                        <div
-                            className={cn(
-                                'relative shrink-0 px-2 pb-2.5 pt-2 text-white shadow-sm sm:px-2.5 sm:pb-3 sm:pt-2.5',
-                                headerBg
-                            )}
-                            style={pipelineHeaderClip}
-                        >
-                            <div className="flex items-start justify-between gap-1 pr-4 sm:gap-2 sm:pr-5">
-                                <span className="text-[11px] font-bold leading-tight tracking-wide sm:text-[13px]">
-                                    {col.label}
-                                </span>
-                                <span className="shrink-0 rounded-full bg-black/15 px-2 py-0.5 text-xs font-bold tabular-nums">
-                                    {col.deals.length}
-                                </span>
-                            </div>
-                            <div className="mt-2 text-xs font-semibold tabular-nums text-white/95">
-                                {fmtMoney(sumDeal)}
-                            </div>
-                        </div>
-                        <div className="flex max-h-[min(62vh,560px)] min-h-[120px] flex-1 flex-col gap-1.5 overflow-y-auto p-1.5 sm:gap-2 sm:p-2">
-                            {col.deals.map((deal) => (
-                                <PipelineDealCard key={deal.id} deal={deal} openDeal={openDeal} />
-                            ))}
-                            <div className="mt-auto shrink-0 pt-1">
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-8 w-full justify-center text-violet-700 hover:bg-violet-50"
-                                    disabled={createBusy}
-                                    onClick={() => createDeal(col.value)}
-                                >
-                                    + Add deal
-                                </Button>
-                            </div>
-                        </div>
-                    </div>
-                );
-            })}
+                        + Add deal
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function PipelineBoard({ columns, openDeal, patchDeal, createDeal, createBusy }) {
+    const mainCols = columns.slice(0, 5);
+    const lostCol = columns.find((c) => c.value === 'lost');
+
+    return (
+        <div className="flex min-h-[min(75vh,720px)] w-full min-w-0 gap-2 overflow-x-auto pb-2 pt-1 [scrollbar-gutter:stable]">
+            {/* New → Won: share full visible width equally */}
+            <div className="flex min-h-[min(75vh,720px)] min-w-full shrink-0 gap-2">
+                {mainCols.map((col) => (
+                    <PipelineStageColumn
+                        key={col.value}
+                        col={col}
+                        openDeal={openDeal}
+                        patchDeal={patchDeal}
+                        createDeal={createDeal}
+                        createBusy={createBusy}
+                        columnClassName="min-w-0 flex-1 basis-0"
+                    />
+                ))}
+            </div>
+            {/* Lost: fixed column — scroll right to see */}
+            {lostCol ? (
+                <div className="flex min-h-[min(75vh,720px)] w-[min(280px,28vw)] min-w-[220px] shrink-0 flex-col self-stretch">
+                    <PipelineStageColumn
+                        col={lostCol}
+                        openDeal={openDeal}
+                        patchDeal={patchDeal}
+                        createDeal={createDeal}
+                        createBusy={createBusy}
+                        columnClassName="min-h-0 flex-1"
+                    />
+                </div>
+            ) : null}
         </div>
     );
 }