[bug]: ScrollArea not taking full height of Carousel

[waelassafdev]

Describe the bug

I'm having an issue using Carousel with ScrollArea to to disable vertical carousel scroll when items are overx #4875

On mobile devices the carousel prevents natural page scroll, which gives use the idea that the page is over.

Is there a way to resume natural page scroll when items are over, and when the user scrolls in the opposite direction the carousel scroll resumes?

"use client"

import { useEffect, useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
    type CarouselApi,
} from "@/components/ui/carousel"
import { cn } from "@/lib/utils"
import { AiOutlineWhatsApp } from "react-icons/ai"
import { FaChevronLeft } from "react-icons/fa"
import AnimatedLink from "@/components/local/animated-link"
import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
import { ScrollArea } from "@/components/ui/scroll-area"

// Mock data for services
const services = [
    {
        id: 1,
        title: "Electrical Maintenance",
        description:
            "In a market filled with temporary solutions and unqualified hands, we offer you the professionalism you deserve...",
        image: "/service-1.png",
        price: "100",
    },
    {
        id: 2,
        title: "Electrical Maintenance",
        description:
            "In a market filled with temporary solutions and unqualified hands, we offer you the professionalism you deserve...",
        image: "/service-2.png",
        price: "150",
    },
    {
        id: 3,
        title: "Electrical Maintenance",
        description:
            "In a market filled with temporary solutions and unqualified hands, we offer you the professionalism you deserve...",
        image: "/service-3.png",
        price: "200",
    },
    // Add more services...
]

export default function ServicesSlider() {
    const [api, setApi] = useState<CarouselApi>()
    const [current, setCurrent] = useState(0)
    const [count, setCount] = useState(0)

    useEffect(() => {
        if (!api) return

        setCount(api.scrollSnapList().length)
        setCurrent(api.selectedScrollSnap() + 1)

        api.on("select", () => {
            setCurrent(api.selectedScrollSnap() + 1)
        })
    }, [api])

    return (
        <section
            id="services"
            className="w-full pb-10 md:py-16 bg-gradient-to-r from-black via-wine-700 to-wine-800 text-white"
        >
            <div className="px-4 md:px-6 mb-10 pt-10 md:pt-0">
                <h2 className="text-3xl font-bold tracking-tighter text-center sm:text-4xl md:text-5xl m-0">
                    iFix Services
                </h2>
            </div>
            <ScrollArea className="h-fit w-full rounded-md">
                <Carousel
                    opts={{ align: "start", dragFree: true }}
                    plugins={[WheelGesturesPlugin()]}
                    orientation="vertical"
                    className="w-full max-w-5xl mx-auto h-[500px] mt-16 mb-20 md:my-24 text-center md:text-right"
                    setApi={setApi}
                    dir="ltr"
                >
                    <CarouselContent className="-mt-1 h-[500px]">
                        {services.map((service) => (
                            <CarouselItem
                                key={service.id}
                                className="pt-1 md:basis-3/4"
                            >
                                <div className="p-1">
                                    <Card>
                                        <CardContent className="flex flex-col md:flex-row p-6 gap-2">
                                            <div className="flex flex-col justify-between md:w-1/2 md:pr-6">
                                                <div>
                                                    <h3 className="text-3xl font-semibold mb-2">
                                                        {service.title}
                                                    </h3>
                                                    <p className="text-muted-foreground mb-4 text-xl">
                                                        {service.description}
                                                    </p>

                                                    <p
                                                        className="text-2xl font-bold text-wine-800 mb-2"
                                                        dir="rtl"
                                                    >
                                                        Starting from&nbsp;
                                                        {service.price}{" "}
                                                        SAR&nbsp;
                                                    </p>
                                                </div>
                                                <Button className="w-1/2 mx-auto md:mr-0 text-lg bg-green-600">
                                                    <AiOutlineWhatsApp />
                                                    &nbsp; Book Service
                                                </Button>
                                            </div>
                                            <div className="md:w-1/2 mt-4 md:mt-0">
                                                <Image
                                                    src={service.image}
                                                    alt={service.title}
                                                    width={400}
                                                    height={300}
                                                    className="rounded-lg object-cover w-full h-[200px] md:h-[300px]"
                                                />
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>
                            </CarouselItem>
                        ))}
                    </CarouselContent>
                    {current > 1 && (
                        <CarouselPrevious
                            className={cn(
                                current === 1
                                    ? "opacity-0 pointer-events-none"
                                    : "opacity-100"
                            )}
                        />
                    )}
                    <CarouselNext
                        className={cn(
                            "transition-opacity duration-900 ease-in-out",
                            current === count ? "opacity-50" : "opacity-100",
                            count > 1 && "animate-pulse"
                        )}
                    />
                </Carousel>
            </ScrollArea>

            <div className="flex justify-center mt-12">
                <AnimatedLink
                    color={"muted"}
                    textColor={"white"}
                    text={"All Services"}
                    icon={<FaChevronLeft />}
                    href={"/services"}
                />
            </div>
        </section>
    )
}

Affected component/components

Carouse

How to reproduce

1. The code is self-contained. Just add images to see the full picture

Codesandbox/StackBlitz link

No response

Logs

None

System Info

MacOS

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues