From 2912373081f94e0fc03dc76da2fa405b59fece41 Mon Sep 17 00:00:00 2001 From: Amirhossein Khalili Date: Fri, 2 Oct 2026 15:01:39 +0330 Subject: [PATCH] fix: contain featured events carousel overflow --- src/components/home/FeaturedEventsCarousel.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/home/FeaturedEventsCarousel.tsx b/src/components/home/FeaturedEventsCarousel.tsx index 519faa6..a8ba404 100644 --- a/src/components/home/FeaturedEventsCarousel.tsx +++ b/src/components/home/FeaturedEventsCarousel.tsx @@ -130,14 +130,14 @@ export function FeaturedEventsCarousel({ events, now }: FeaturedEventsCarouselPr ); - 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 - ? "max-sm:flex max-sm:overflow-x-auto max-sm:touch-pan-x" - : "grid-cols-1" + ? "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" + : "" } ${ hasTabletSlides - ? "sm:max-xl:flex sm:max-xl:overflow-x-auto sm:max-xl:touch-pan-x" - : "sm:grid-cols-2" + ? "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" + : "" }`; return ( @@ -157,7 +157,7 @@ export function FeaturedEventsCarousel({ events, now }: FeaturedEventsCarouselPr
{ 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" >