Merge pull request #309 from nimit9/fix/history-carousel

fixed: left arrow not visible on watch history carousel
code100x · Apr 11, 2024 · 099a601 · 099a601
2 parents 612fa7f + a9e2ecb
commit 099a601
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/WatchHistoryClient.tsx b/src/components/WatchHistoryClient.tsx
@@ -8,6 +8,7 @@ import {
   CarouselContent,
   CarouselItem,
   CarouselNext,
+  CarouselPrevious,
 } from '@/components/ui/carousel';
 
 const WatchHistoryClient = ({ history }: { history: TWatchHistory[] }) => (
@@ -23,6 +24,7 @@ const WatchHistoryClient = ({ history }: { history: TWatchHistory[] }) => (
       ))}
     </CarouselContent>
     <CarouselNext />
+    <CarouselPrevious />
   </Carousel>
 );
 

diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
@@ -206,9 +206,10 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
+        !canScrollPrev ? 'md:hidden' : '',
         'absolute  h-8 w-8 rounded-full',
         orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
+          ? '-top-12 right-10 md:-left-12 md:top-1/2 md:-translate-y-1/2'
           : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
         className,
       )}
@@ -235,9 +236,10 @@ const CarouselNext = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
+        !canScrollNext ? 'md:hidden' : '',
         'absolute h-8 w-8 rounded-full',
         orientation === 'horizontal'
-          ? '-top-12 right-0 sm:-right-12 sm:top-1/2 sm:-translate-y-1/2'
+          ? '-top-12 right-0 md:-right-12 md:top-1/2 md:-translate-y-1/2'
           : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
         className,
       )}