GuilanCE/guilan-ace-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: contain featured events carousel overflow

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-10-02 15:01:39 +03:30
parent 94b5ee135a
commit 2912373081
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/home/FeaturedEventsCarousel.tsx
View File

@@ -130,14 +130,14 @@ export function FeaturedEventsCarousel({ events, now }: FeaturedEventsCarouselPr
</div> </div>
); );
const trackClassName = `grid gap-3 sm:gap-4 xl:grid-cols-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${ const trackClassName = `grid w-full min-w-0 max-w-full grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-2 xl:grid-cols-3 [contain:paint] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
hasMobileSlides hasMobileSlides
? "max-sm:flex max-sm:overflow-x-auto max-sm:touch-pan-x" ? "max-sm:grid-flow-col max-sm:grid-cols-none max-sm:auto-cols-[85%] max-sm:overflow-x-auto max-sm:touch-pan-x"
: "grid-cols-1" : ""
} ${ } ${
hasTabletSlides hasTabletSlides
? "sm:max-xl:flex sm:max-xl:overflow-x-auto sm:max-xl:touch-pan-x" ? "sm:max-xl:grid-flow-col sm:max-xl:grid-cols-none sm:max-xl:auto-cols-[calc(50%_-_0.5rem)] sm:max-xl:overflow-x-auto sm:max-xl:touch-pan-x"
: "sm:grid-cols-2" : ""
}`; }`;
return ( return (
@@ -157,7 +157,7 @@ export function FeaturedEventsCarousel({ events, now }: FeaturedEventsCarouselPr
<div <div
key={event.id} key={event.id}
ref={(element) => { cardRefs.current[index] = element; }} ref={(element) => { cardRefs.current[index] = element; }}
className={`min-w-0 ${hasMobileSlides ? "max-sm:basis-[85%] max-sm:shrink-0" : ""} ${hasTabletSlides ? "sm:max-xl:basis-[calc(50%_-_0.5rem)] sm:max-xl:shrink-0" : ""}`} className="min-w-0"
> >
<EventCard event={event} now={now} /> <EventCard event={event} now={now} />
</div> </div>