LaLeV/wacrm
1
0
Fork 0
mirror of https://github.com/Luchexx/wacrm.git synced 2026-11-02 17:29:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(pipelines): keep horizontal scrollbar visible on desktop boards

Browse Source 
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>
This commit is contained in:
Arnas Donauskas 2026-06-08 13:08:27 +03:00
parent 934dcafffd
commit 165bdd3335
No known key found for this signature in database
1 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/pipelines/pipeline-board.tsx
View File

@ -104,8 +104,10 @@ export function PipelineBoard({
> >
{/* snap-x + snap-mandatory on mobile so swipes land the next {/* snap-x + snap-mandatory on mobile so swipes land the next
stage cleanly at the viewport edge instead of mid-column. stage cleanly at the viewport edge instead of mid-column.
Disabled on lg+ because the full board fits without scroll Disabled on lg+ where snapping would interfere with the
there and snapping would interfere with the natural layout. */} 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"> <div className="pipeline-scroll flex snap-x snap-mandatory gap-3 overflow-x-auto pb-4 lg:snap-none">
{sortedStages.map((stage) => { {sortedStages.map((stage) => {
const stageDeals = dealsByStage.get(stage.id) ?? []; const stageDeals = dealsByStage.get(stage.id) ?? [];
@ -150,7 +152,12 @@ export function PipelineBoard({
.pipeline-scroll { .pipeline-scroll {
scroll-behavior: smooth; 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 { .pipeline-scroll::-webkit-scrollbar {
height: 0; height: 0;
display: none; display: none;
@ -159,6 +166,25 @@ export function PipelineBoard({
scrollbar-width: none; 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> `}</style>
</DndContext> </DndContext>
); );