[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

[holdenmatt]

I'm also seeing this. I can click to open the menu, but none of the menu items are clickable.

The CSS workaround doesn't work for me. Any other ideas?

[antho1404]

Have you tried to put it directly when you initialize the provider with something like that:

<ClerkProvider appearance={{
  elements: {   
    organizationSwitcherPopoverRootBox: {
      width: "100%",
      pointerEvents: "auto",
    },
  },
}}>
  {children}
<ClerkProvider>

[kylesurfs]

I've been having the same issues as described above. Per @antho1404's comment, I added the following to my <ClerkProvider> and it fixed my issue:

<ClerkProvider
        appearance={{
          elements: {
            organizationSwitcherPopoverRootBox: {
              width: "100%",
              pointerEvents: "auto",
            },
            userButtonPopoverRootBox: {
              width: "100%",
              pointerEvents: "auto",
            },
          },
        }}
      >

[holdenmatt]

Very nice, that also fixed it for me. I'm not using organizations in Clerk so adding the user button version was the fix for me - thanks!

[lucebert]

@kylesurfs works for me thank you