problem with drawer and fixed or sticky thing.

[seoyoon-sago]

Hi everyone. This is my first time posting a question online, and to be honest, I was a bit afraid to ask.
But I’ve been struggling with this issue for a while and really need help 😭

I'm trying to make a sticky horizontally-scrollable card section at the bottom of the browser.
The tricky part is that the page also has a Drawer component that is always open, and the card section is outside the drawer content — meaning it visually overlaps with it, but it’s not inside the drawer's DOM.

Initially, I couldn’t interact with the cards at all (click/scroll didn’t work),
but then I added pointer-events-auto to the container, and interactions started working.
However, now I need to scroll the cards horizontally, and that’s where I’m stuck.

Here’s a simplified version of the code:

<div className="sticky bottom-0 z-61 w-full h-fit pointer-events-auto">
  <ScrollArea
    className="w-full max-w-[640px] h-[92px] bg-gradient-to-b from-white/0 to-white to-[50%] focus:!pointer-events-auto"
  >
    <div className="flex space-x-[4px] pr-[16px] ml-4">
      <ReservationCard hospital={hospital} width="18" wideWidth="w-[81.71px]" />
    </div>
    <ScrollBar hidden={true} orientation="horizontal" />
  </ScrollArea>
</div>