Merge pull request #747 from Sitecore/bcn/bf/carousel-react-select-bugfix

fix: restore carousel nav arrows and Select React menu visibility

Author: SC-vishathamarasinghe

src/app/content/ui/carousel/carousel-negative-margin.tsx

@@ -18,7 +18,7 @@ export default function CarouselNegativeMarginDemo() {
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem key={index} className="pl-1 md:basis-1/2">
               <div className="p-1">
-                <Card className="bg-subtle-bg border-subtle-bg">
+                <Card className="bg-subtle-bg border-subtle-bg p-0">
                   <CardContent className="flex aspect-square items-center justify-center p-6">
                     <span className="text-2xl font-semibold text-body-text">
                       {index + 1}

src/app/content/ui/carousel/carousel-start-aligned.tsx

@@ -9,7 +9,7 @@ import {
 
 export default function CarouselStartAlignedDemo() {
   return (
-    <div className="w-full max-w-sm mx-auto">
+    <div className="w-full max-w-sm mx-auto px-20">
       <Carousel
         className="w-full"
         aria-label="Responsive cards carousel with start alignment"
@@ -21,7 +21,7 @@ export default function CarouselStartAlignedDemo() {
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
               <div className="p-1">
-                <Card className="bg-subtle-bg border-subtle-bg">
+                <Card className="bg-subtle-bg border-subtle-bg p-0">
                   <CardContent className="flex aspect-square items-center justify-center p-6">
                     <span className="text-3xl font-semibold text-body-text">
                       {index + 1}

src/app/content/ui/carousel/carousel.tsx

@@ -18,7 +18,7 @@ export default function CarouselDemo() {
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem key={index}>
               <div className="p-1">
-                <Card className="bg-subtle-bg border-subtle-bg">
+                <Card className="bg-subtle-bg border-subtle-bg p-0">
                   <CardContent className="flex aspect-square items-center justify-center p-6">
                     <span className="text-4xl font-semibold text-body-text">
                       {index + 1}

src/components/ui/select-react.tsx

@@ -227,6 +227,10 @@ function SelectReact<
         ...base,
         backgroundColor: undefined,
       }),
+      menuPortal: (base) => ({
+        ...base,
+        zIndex: 50,
+      }),
       menuList: (base) => ({
         ...base,
         padding: undefined,
@@ -298,6 +302,7 @@ function SelectReact<
       components={mergedComponents}
       isDisabled={isDisabled}
       isOptionDisabled={(option) => !!(option as SelectReactOption).disabled}
+      menuPortalTarget={typeof document !== "undefined" ? document.body : null}
       {...props}
     />
   );