diff --git a/src/components/pipelines/pipeline-board.tsx b/src/components/pipelines/pipeline-board.tsx
index f5cbf77..fb2256f 100644
--- a/src/components/pipelines/pipeline-board.tsx
+++ b/src/components/pipelines/pipeline-board.tsx
@@ -104,8 +104,10 @@ export function PipelineBoard({
>
{/* 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. */}
+ Disabled on lg+ where snapping would interfere with the
+ natural layout. The board can still overflow horizontally on
+ lg+ once a pipeline has many stages (columns keep a 260px
+ min-width), so a thin scrollbar stays visible on desktop. */}
{sortedStages.map((stage) => {
const stageDeals = dealsByStage.get(stage.id) ?? [];
@@ -150,7 +152,12 @@ export function PipelineBoard({
.pipeline-scroll {
scroll-behavior: smooth;
}
- @media (hover: hover) and (pointer: fine) {
+ /* On touch devices the peek/snap layout already signals there's
+ more to swipe, so the scrollbar is hidden for a clean look.
+ On desktop (mouse) the board can overflow with many stages
+ and there is no peek hint, so keep a thin, themed scrollbar
+ visible to make the overflow discoverable and usable. */
+ @media (hover: none), (pointer: coarse) {
.pipeline-scroll::-webkit-scrollbar {
height: 0;
display: none;
@@ -159,6 +166,25 @@ export function PipelineBoard({
scrollbar-width: none;
}
}
+ @media (hover: hover) and (pointer: fine) {
+ .pipeline-scroll {
+ scrollbar-width: thin;
+ scrollbar-color: rgb(51 65 85) transparent;
+ }
+ .pipeline-scroll::-webkit-scrollbar {
+ height: 8px;
+ }
+ .pipeline-scroll::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ .pipeline-scroll::-webkit-scrollbar-thumb {
+ background-color: rgb(51 65 85);
+ border-radius: 9999px;
+ }
+ .pipeline-scroll::-webkit-scrollbar-thumb:hover {
+ background-color: rgb(71 85 105);
+ }
+ }
`}
);