[bug]: Mobile sidebar doesn't play nice with Clerk popup

[stargeneration-winston]

Describe the bug

I place the Clerk signed-in user button on my sidebar, and this button is impossible to click on any screen where the sidebar is an overlay.

This appears to be because the sidebar's interaction area overrides the clerk button.

    <Sidebar variant="floating" collapsible="offcanvas">
      <SidebarHeader>
        <div className="flex justify-between items-center p-4">
          Workspace
          <SignedIn>
            <div className="relative z-1">
              <UserButton
                appearance={{
                  baseTheme: darkMode ? dark : undefined,
                }}
              />
            </div>
          </SignedIn>
        </div>
      </SidebarHeader>

I've tried using tailwind to adjust the relative z but no luck so far.

Affected component/components

Sidebar

How to reproduce

1. Add Sidebar
2. Add Clerk signed in button to sidebar.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Chrome 129
macOS 15
Vite 5.4.2

Before submitting

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

[antho1404]

I found a way to "fix" this issue by adding the following css

.cl-organizationSwitcherPopoverRootBox {
  pointer-events: auto;
}

Also connecting the issue on clerk about that clerk/javascript#4373