fixing overflow issue

www/components/Carousels/ImageCarousel.tsx

@@ -87,12 +87,12 @@ function ImageCarousel(props: ImageCarouselProps) {
             </Tabs>
           </div>
           <div
-            className={`border border-gray-100 dark:border-gray-600 rounded-md bg-gray-800 overflow-hidden ${ImageCarouselStyles['gradient-bg']}`}
+            className={`border border-gray-100 dark:border-gray-600 rounded-md bg-gray-800 ${ImageCarouselStyles['gradient-bg']}`}
           >
             <Swiper
               // @ts-ignore
               onSwiper={setImageSwiper}
-              style={{ zIndex: 0 }}
+              style={{ zIndex: 0, overflow: 'auto' }}
               initialSlide={0}
               spaceBetween={0}
               slidesPerView={1}

www/components/Sections/TwitterSocialProof.tsx

@@ -62,10 +62,13 @@ function TwitterSocialProof() {
             spaceBetween={0}
             slidesPerView={4}
             speed={300}
+            watchOverflow={true}
             loop
             navigation={{
-              prevEl: prevRef.current ? prevRef.current : undefined,
-              nextEl: nextRef.current ? nextRef.current : undefined,
+              prevEl: prevRef.current,
+              nextEl: nextRef.current,
+              // prevEl: prevRef.current ? prevRef.current : undefined,
+              // nextEl: nextRef.current ? nextRef.current : undefined,
             }}
             onInit={(swiper: any) => {
               swiper.params.navigation.prevEl = prevRef.current