[bug]: Cannot Modify div with style="min-width:100%;display:table" in ScrollArea Component, Causes Overflow

[Leon-azerty]

Describe the bug

The ScrollArea component in the shadcn/ui library contains a div element with the style min-width:100%;display:table. This div cannot be modified without directly altering the files in the node_modules directory. As a result, the element takes up the entire width and overflows the screen.

Affected component/components

ScrollArea

How to reproduce

Steps to reproduce the behavior:

Import and use the ScrollArea component from shadcn/ui in a project.
Observe that there is a div with style="min-width:100%;display:table" within the component structure.
Notice that this div causes the component to take up the entire width of the screen and overflow.

page.tsx

<ScrollArea className="@container">
        <GoodMorning />
        <Recommendations />
</ScrollArea>

good-morning.tsx

export default function GoodMorning() {
  return (
    <section
      className={cn(
        'grid max-w-full gap-4 grid-cols-4 grid-rows-2',
      )}
    >
      {list.map((item) => (
        <GridElement title={item.title} src={item.src} key={item.title} />
      ))}
    </section>
  )
}

Codesandbox/StackBlitz link

https://github.com/leon3108/spotiflex

Logs

No response

System Info

I use Brave as browser

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[vinitkesh]

The link you provided, isn't working for some reason.

I think the repo you are referencing is private.

[Leon-azerty]

Yes, I have changed the visibility.

[Anton-Cherniuk]

Same problem

[makotodejima]

This is an issue with the underlying radix-ui's component ScrollArea.
See the issue in radix-ui: radix-ui/primitives#926 (comment)
There's also a suggested workaround there.

[Leon-azerty]

I applied these changes : radix-ui/primitives#926 (comment)
and it worked. Thanks you @makotodejima