Open DaniS0312 opened 1 month ago
i had this issue too.
what i did was go into scroll-area.svelte and added this style, and it seems to work now by overriding the display: table.
<ScrollAreaPrimitive.Content style="min-width: 100%; display: flex;">
Describe the bug
The problem I faced was being unable to truncate text based on the scrollarea component's parent width constraint. Below is a video example, and minimal code to reproduce.
Upon some debugging I found that the source of the issue is that the ScrollAreaPrimitive.Content element is manually styled with
display:table
(and min-width: 100%). This breaks the flex/w-full chain I was using to constrain width.Upon changing the content element (tagged with 'data-melt-scroll-area-content') to display:flex, I get the desired effect.
When I try to overwrite this in the component:
It gets overwritten by those manual styles:
P.S. I've had trouble with the obfuscated bits-ui (and even lower-level melt-ui) parts a few times now, maybe I am thinking about it wrong. If I look at the docs for the melt-ui scroll-area here here I can't see those styles being applied either. Could you maybe elaborate on when I would need to reach into melt-ui components? From my perspective your shadcn port is already pretty damn robust.
P.P.S Big congratulations on the work you've put out for the Svelte ecosystem.
Reproduction
The top is using normal 'overflow-auto' container, the bottom is using the scroll-area component.
https://github.com/huntabyte/shadcn-svelte/assets/60684710/e6702399-e9a8-4f2b-9da6-e22c3c8e240e
Logs
No response
System Info
Severity
annoyance