update

frontend/src/pages/Deals.jsx

@@ -207,17 +207,17 @@ function PipelineDealCard({ deal, openDeal }) {
                 }
             }}
             className={cn(
-                'w-full cursor-grab rounded-lg border border-slate-200 bg-white p-3 text-left shadow-sm outline-none',
+                'w-full cursor-grab rounded-lg border border-slate-200 bg-white p-2 text-left shadow-sm outline-none sm:p-2.5',
                 'transition hover:border-violet-300 hover:shadow-md active:cursor-grabbing'
             )}
         >
             <div className="line-clamp-2 text-sm font-semibold leading-snug text-slate-900">
                 {deal.name || 'Untitled'}
             </div>
-            <div className="mt-2 break-words text-base font-semibold tabular-nums leading-tight text-slate-800">
+            <div className="mt-1.5 break-words text-sm font-semibold tabular-nums leading-tight text-slate-800 sm:text-base">
                 {fmtMoney(deal.deal_value)}
             </div>
-            <div className="mt-3 flex items-end justify-between gap-2">
+            <div className="mt-2 flex items-end justify-between gap-1.5 sm:mt-3 sm:gap-2">
                 <div className="min-w-0 flex flex-1 flex-wrap items-center gap-2">
                     <div
                         className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-violet-200 bg-violet-100 text-xs font-bold text-violet-800"
@@ -242,14 +242,24 @@ function PipelineDealCard({ deal, openDeal }) {
 
 function PipelineBoard({ columns, openDeal, patchDeal, createDeal, createBusy }) {
     return (
-        <div className="flex min-h-[min(75vh,720px)] w-full min-w-0 gap-3 overflow-x-auto pb-2 pt-1 [scrollbar-gutter:stable]">
+        <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'
+            )}
+        >
             {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="flex w-[min(100%,320px)] min-w-[260px] max-w-[360px] shrink-0 flex-col rounded-xl border border-slate-200 bg-slate-100/90 shadow-sm"
+                        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';
@@ -266,13 +276,13 @@ function PipelineBoard({ columns, openDeal, patchDeal, createDeal, createBusy })
                     >
                         <div
                             className={cn(
-                                'relative shrink-0 px-3 pb-3 pt-2.5 text-white shadow-sm',
+                                '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-2 pr-5">
-                                <span className="text-[13px] font-bold leading-tight tracking-wide">
+                            <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">
@@ -283,7 +293,7 @@ function PipelineBoard({ columns, openDeal, patchDeal, createDeal, createBusy })
                                 {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">
+                        <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} />
                             ))}