Problem with Sticky header with Drawer

[elmurodurinboev]

Problem

When using a sticky or fixed Header component along with a Drawer (from shadcn/ui), the header remains visible visually, but it becomes non-interactive (i.e., buttons or links inside it are not clickable) once the drawer is open.

This happens even if the header has a higher z-index than the drawer. It seems like the DrawerContent or its container is overlaying the entire viewport and blocking pointer events, including on elements behind it.

Steps to reproduce

1. Add a sticky Header with a high z-index (e.g. z-50 or more).
2. Add a Drawer that opens from the top (or full-screen).
3. Open the drawer.
4. Try clicking any button or link inside the Header.

[seoyoon-sago]

In my opinion, this issue might be resolved by using the CSS property pointer-events-auto.

I needed to place a route button at the bottom of the screen inside a sticky container.
However, due to the modal API behavior of the Drawer, it became impossible to interact with it.

So, I applied pointer-events-auto like this:

  <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>

  After applying it, it worked as expected.

You might want to try it too!