Scroll area scrollbar size is not being respected in the hover property

[suchintan]

What package has an issue

@mantine/core

Describe the bug

I noticed that the scroll bar's hover area is bigger than the actual scroll bar. This is causing a really unusual bug in my work where my float-right component is being hidden behind the scroll bar

You can actually reproduce this on the scroll area demo page here:
https://mantine.dev/core/scroll-area/

ScrollArea._.Mantine.-.2.October.2022.mp4

If you put your mouse even 10 pixels to the left of the scroll bar it still considers the scrollbar as "hovered", even if you reduce the size or set offset on

What version of @mantine/hooks page do you have in package.json?

5.2.4

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

I'm not really sure what the cause of the issue is.. still a learning react developer 😅

[trangcongthanh]

I got the same problem, but this is default behavior of @radix-ui/react-scroll-area. For most cases, this is not an issue. It only becomes a problem when I try to use ScrollArea component for the UI with small height. When the thumb appeared, I couldn't click the content below :(

In my case, I unset the min-width/min-height of the thumb::before:

<ScrollArea styles={{ thumb: { ':before': { minHeight: 'unset', minWidth: 'unset' } } }} >

If you want to disable it globally, you can set the defaultProps for ScrollArea:

<MantineProvider
  theme={{
    components: { ScrollArea: { defaultProps: { styles: { thumb: { ':before': { minHeight: 'unset', minWidth: 'unset' } } } } } },
  }}
>

When you unset those values, your user with touch screens may find it harder to scroll the content by grabbing the thumb in scrollbar.

[rtivital]

Fixed in 5.5.2

[suchintan]

Thank you @rtivital and @trangcongthanh !