From 3356934590ba0b20c50892f83670e420857439dc Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 13 Jun 2024 08:09:06 +0000
Subject: [PATCH] fix: carousel on mobile screen

---
 apps/marketing/src/components/(marketing)/carousel.tsx | 8 ++++----
 apps/marketing/src/components/(marketing)/slide.tsx    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/carousel.tsx b/apps/marketing/src/components/(marketing)/carousel.tsx
index 9aaac02c7..307d4a4f0 100644
--- a/apps/marketing/src/components/(marketing)/carousel.tsx
+++ b/apps/marketing/src/components/(marketing)/carousel.tsx
@@ -235,16 +235,16 @@ export const Carousel = () => {
           </div>
         </div>
 
-        <div className="dark:bg-background absolute bottom-2 right-2 flex w-[5%] flex-col items-center space-y-1 rounded-lg bg-white  p-1.5">
-          <span className="text-foreground dark:text-muted-foreground text-xs">
+        <div className="dark:bg-background absolute bottom-2 right-2 flex w-[20%] flex-col items-center space-y-1 rounded-lg bg-white p-1.5 sm:w-[5%]">
+          <span className="text-foreground dark:text-muted-foreground text-[10px] sm:text-xs">
             {selectedIndex + 1}/{slides.length}
           </span>
           <Progress value={progress} className="h-1" />
         </div>
       </Card>
 
-      <div className="mx-auto mt-12 max-w-4xl px-2">
-        <div className="mt-2 flex justify-between" ref={emblaThumbsRef}>
+      <div className="mx-auto mt-6 w-full max-w-4xl px-2 sm:mt-12">
+        <div className="mt-2 flex flex-wrap justify-between gap-6" ref={emblaThumbsRef}>
           {slides.map((slide, index) => (
             <Slide
               key={index}
diff --git a/apps/marketing/src/components/(marketing)/slide.tsx b/apps/marketing/src/components/(marketing)/slide.tsx
index 48390585b..083641527 100644
--- a/apps/marketing/src/components/(marketing)/slide.tsx
+++ b/apps/marketing/src/components/(marketing)/slide.tsx
@@ -17,7 +17,7 @@ export const Slide: React.FC<SlideProps> = (props) => {
       onClick={onClick}
       type="button"
       className={cn(
-        'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-4',
+        'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-1 text-xs sm:py-4 sm:text-base',
         {
           'border-primary text-foreground dark:text-muted-foreground border-b-2': selected,
         },