From cf36dcabc299893a4cfc391654964aa07b23cbc2 Mon Sep 17 00:00:00 2001
From: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
Date: Thu, 3 Apr 2025 21:31:27 +0530
Subject: [PATCH] fix(marketplace): Fix margin between arrows and carousel
 (#9745)

- fix #8958

Currently, the arrow button and carousel have a 16px margin, and the
button is placed 12px below the top of the container. This makes the
spacing appear to be 28px. Therefore, place the button and indicator at
the top of the container.
---
 autogpt_platform/frontend/src/components/ui/carousel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/ui/carousel.tsx b/autogpt_platform/frontend/src/components/ui/carousel.tsx
index cf5ff95f20..8a391b5b39 100644
--- a/autogpt_platform/frontend/src/components/ui/carousel.tsx
+++ b/autogpt_platform/frontend/src/components/ui/carousel.tsx
@@ -213,7 +213,7 @@ const CarouselPrevious = React.forwardRef<
         className={cn(
           "absolute h-[52px] w-[52px] rounded-full",
           orientation === "horizontal"
-            ? "-bottom-20 right-24 -translate-y-1/2"
+            ? "right-24 top-0"
             : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
           className,
         )}
@@ -259,7 +259,7 @@ const CarouselNext = React.forwardRef<
         className={cn(
           "absolute h-[52px] w-[52px] rounded-full",
           orientation === "horizontal"
-            ? "-bottom-20 right-4 -translate-y-1/2"
+            ? "right-4 top-0"
             : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
           className,
         )}
@@ -302,7 +302,7 @@ const CarouselIndicator = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={cn("relative top-10 flex h-3 items-center gap-2", className)}
+      className={cn("relative top-7 flex h-3 items-center gap-2", className)}
       {...props}
     >
       {scrollSnaps.map((_, index) => (