diff --git a/src/components/pipelines/pipeline-board.tsx b/src/components/pipelines/pipeline-board.tsx index ddfa1d9..135acb7 100644 --- a/src/components/pipelines/pipeline-board.tsx +++ b/src/components/pipelines/pipeline-board.tsx @@ -102,7 +102,11 @@ export function PipelineBoard({ onDragEnd={handleDragEnd} onDragCancel={handleDragCancel} > -
+ {/* snap-x + snap-mandatory on mobile so swipes land the next + stage cleanly at the viewport edge instead of mid-column. + Disabled on lg+ because the full board fits without scroll + there and snapping would interfere with the natural layout. */} +
{sortedStages.map((stage) => { const stageDeals = dealsByStage.get(stage.id) ?? []; const totalValue = stageDeals.reduce( @@ -176,7 +180,13 @@ function StageColumn({ const { setNodeRef, isOver } = useDroppable({ id: stage.id }); return ( -
+ // On mobile each column is `w-[85vw]` (with a reasonable min/max) + // so the next column's edge peeks in — a "there's more here" hint. + // snap-start lands each column cleanly when swiping. On lg+ we + // restore the flex-1 share-the-row behavior. The droppable ref is + // on the inner messages region below — intentionally NOT here, so + // a drag over the column header doesn't highlight the whole column. +
{/* 3px colored top border — sits above the column's padding */}