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

Merge pull request #221 from ArnasDon/fix/pipeline-board-horizontal-scroll

Browse Source 
fix(pipelines): keep horizontal scrollbar visible on desktop boards
This commit is contained in:
Arnas Donauskas 2026-06-08 13:10:14 +03:00 committed by GitHub
commit 151a5dae95
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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
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>
);