Horizontal Scrollbar Thumb Grow

[rizaldywirawan]

Holla folks,

Seems like the horizontal scrollbar thumb has a bug caused by the flex-1 on the ScrollAreaPrimitive.ScrollAreaThumb.

Actually this flex-1 is used by the vertical scrollbar.

Horizontal.Scrollbar.Bug.mp4

How to fix:
The quick fix here is make a condition where only add the flex-1 for the vertical scrollbar only. For example:
<ScrollAreaPrimitive.ScrollAreaThumb className={cn("h-full bg-primary-100 border border-primary-500 relative rounded-full", orientation === "vertical" && 'flex-1')} />

[SoyDiego]

className={cn("h-full bg-primary-100 border border-primary-500 relative rounded-full", orientation === "vertical" && 'flex-1')}

Hi @rizaldywirawan I'm trying to replicate the problem because I cannot see the problem.
Also I watched your video but I cannot understand what is the problem. I see the thumb bar OK.
Can you give me more details, please? :)

EDIT ⚠️

I saw the problem. I will create a PR :)

[rizaldywirawan]

@SoyDiego Thank you so much for your help.

[SoyDiego]

@SoyDiego Thank you so much for your help.

Hi again @rizaldywirawan, I did a PR applying your solution and works ok.
You can check here: #1296.
This are my first PR's in this project so I hopefully all It's ok.
Now we should wait if Shadcn Team approve it.

Thanks!