Not able to Scroll on Scroll Area that has full width

So I'm building a popup reader like this for my RSS Reader app and I'm having an issue with not being able to Scroll on the <ScrollArea /> component in the Carousel dispute it says it has the proper height in the computed tab. Does anyone know why I might not be able to scroll on it? Stripped Code:
import Carousel from "nuka-carousel";

const Reader({ /* Items and things passed in here */}) {
// Some buffer code here is not shown

return (
<Carousel
withoutControls={true}
renderAnnounceSlideMessage={undefined}
enableKeyboardControls={true}
swiping={true}
dragging={false}
speed={fullscreen ? 0 : 500}
slideIndex={initialIndex}
slidesToScroll="auto"
afterSlide={(endSlideIndex) => {
markRead(items[endSlideIndex]!);
}}
beforeSlide={(_, endSlideIndex) => {
if (endSlideIndex == newBufferedItems.length - 1) {
fetchNextPage();
}
debouncedReplace.current(newBufferedItems, endSlideIndex);
}}
className="min-h-full w-full"
>
{newBufferedItems?.map((item, index) => (
<ScrollArea
// It does now allow me to scroll on this like it should
key={item.id}
className="h-full overflow-x-auto overflow-y-visible"
>
<Markdown
renderer={{
image: (src, alt, title) => {
return (
<img
className="mb-2 mt-3.5 h-auto w-full rounded-[3px] border border-[#f1f1f2] dark:border-neutral-800"
alt={alt}
src={src}
key={src + alt + title}
/>
);
},
}}
value={item.website_content!}
/>
</ScrollArea>
))}
</Carousel>
);
});
import Carousel from "nuka-carousel";

const Reader({ /* Items and things passed in here */}) {
// Some buffer code here is not shown

return (
<Carousel
withoutControls={true}
renderAnnounceSlideMessage={undefined}
enableKeyboardControls={true}
swiping={true}
dragging={false}
speed={fullscreen ? 0 : 500}
slideIndex={initialIndex}
slidesToScroll="auto"
afterSlide={(endSlideIndex) => {
markRead(items[endSlideIndex]!);
}}
beforeSlide={(_, endSlideIndex) => {
if (endSlideIndex == newBufferedItems.length - 1) {
fetchNextPage();
}
debouncedReplace.current(newBufferedItems, endSlideIndex);
}}
className="min-h-full w-full"
>
{newBufferedItems?.map((item, index) => (
<ScrollArea
// It does now allow me to scroll on this like it should
key={item.id}
className="h-full overflow-x-auto overflow-y-visible"
>
<Markdown
renderer={{
image: (src, alt, title) => {
return (
<img
className="mb-2 mt-3.5 h-auto w-full rounded-[3px] border border-[#f1f1f2] dark:border-neutral-800"
alt={alt}
src={src}
key={src + alt + title}
/>
);
},
}}
value={item.website_content!}
/>
</ScrollArea>
))}
</Carousel>
);
});
Full file on Github: https://github.com/michaelkremenetsky/Refeed/blob/main/apps/web/components/reader/Reader.tsx
No description
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server