improve figure and carousel

Author: dphuang2

src/components/FigureWithChildren.tsx

@@ -17,12 +17,12 @@ export default function Figure({
   return (
     <>
       <figure className="mx-0 my-8 flex flex-col items-center [&_img]:my-0">
-        <div className="inline-block">
-          {<div>{childExists ? newChild : children}</div>}
-          <figcaption className="text-sm mt-0 text-gray-600 italic flex justify-center">
-            <div>{caption}</div>
-          </figcaption>
+        <div className="max-w-full overflow-x-auto">
+          {childExists ? newChild : children}
         </div>
+        <figcaption className="text-sm mt-0 text-gray-600 italic flex justify-center">
+          <div>{caption}</div>
+        </figcaption>
       </figure>
     </>
   );

src/components/ui/carousel.tsx

@@ -62,6 +62,7 @@ const Carousel = React.forwardRef<
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
+        loop: true, // Set loop to true by default
       },
       plugins
     );
@@ -243,7 +244,7 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-8 w-8 rounded-full hidden md:inline-flex",
+        "absolute h-full w-8 border-none shadow-none hidden md:inline-flex",
         orientation === "horizontal"
           ? "-left-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
@@ -272,7 +273,7 @@ const CarouselNext = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-8 w-8 rounded-full hidden md:inline-flex",
+        "absolute h-full w-8 hidden border-none shadow-none md:inline-flex",
         orientation === "horizontal"
           ? "-right-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",