From 165bdd3335b96dcdea9236d4482083b8cb86cec3 Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Mon, 8 Jun 2026 13:08:27 +0300
Subject: [PATCH] fix(pipelines): keep horizontal scrollbar visible on desktop
 boards

The pipeline board uses overflow-x-auto but hid the scrollbar on fine
pointers, assuming the full board always fits on lg+. That assumption
breaks once a pipeline has many stages: columns keep a 260px min-width,
so the row overflows the viewport and the rightmost stage gets clipped
with no scrollbar or affordance to reveal it (issue #214).

Scope the scrollbar-hiding to touch devices (where the snap/peek layout
already hints at more content) and show a thin, themed horizontal
scrollbar on desktop so the overflow is discoverable and usable.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/pipelines/pipeline-board.tsx | 32 +++++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

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. */}
       <div className="pipeline-scroll flex snap-x snap-mandatory gap-3 overflow-x-auto pb-4 lg:snap-none">
         {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);
+          }
+        }
       `}</style>
     </DndContext>
   );