user Button from clerk/nextjs is not working when i changes screen size to mobile view or use my web app in mobile

Question

"UserButton from @clerk/nextjs closes immediately on mobile view"

Body: I'm encountering an issue with the UserButton component from @clerk/nextjs in my Next.js application. When I'm using it on a full-size laptop screen, everything works as expected. However, when I change the screen resolution to mobile or use it on a mobile device, the UserButton dialog box closes immediately after clicking, without allowing me to interact with its features.

Details:

The UserButton component is used to handle user authentication and related features. On full-size screens, the button works correctly, and the dialog box displays as expected. The issue arises when using the application on a mobile device or adjusting the screen resolution to a smaller size. No error messages are displayed in the console, making it challenging to identify the root cause. Things I've Checked:

Verified that the styles for the UserButton are responsive and suitable for smaller screens. Checked for any errors in the browser console but found none. Tested the application on different browsers on my mobile device, and the issue persists.

Code Sample:

import { CurrentProfile } from "@/lib/current-profile"
import { db } from "@/lib/db";
import { redirect } from "next/navigation";
import NavigationAction from "@/components/navigation/navigation-action";
import { Separator } from "../ui/separator";
import { ScrollArea } from "../ui/scroll-area";
import { NavigationItem } from "./navigation-item";
import { ModeToggle } from "../mode-toggle";
import { UserButton } from "@clerk/nextjs";

export const NavigationSidebar = async()=>{

    const profile = await CurrentProfile();

    if(!profile){
        return redirect('/');
    }

    const servers = await db.server.findMany({
        where:{
            members:{
                some:{
                    profileId:profile.id,
                }
            }
        }
    })
    return(
        <div className=" space-y-4 flex flex-col items-center h-full text-primary w-full dark:bg-[#1E1F22] bg-[#E3E5E8] py-3">
            <NavigationAction />

        <Separator className="h-[2-px] bgzinc300 dark:bgzinc700 rounded-md w-10 mx-auto"/>
 
        <ScrollArea className=" flex-1 w-full">
            {
                servers.map((server)=>(
                    <div className=" mb-4" key={server.id}>
    <NavigationItem 
    id={server.id}
    name={server.name}
    imageUrl={server.imageUrl}
    />
                    </div>
                ))
            }

        </ScrollArea>

<div className="pb-3 mt-auto flex items-center flex-col gap-y-4">
<ModeToggle />
<UserButton afterSignOutUrl="/" appearance={{
    elements:{
        avatarBox:"h-[48px] w-[48px]"
    }
}} />
</div>
        </div>
    )

}

Certainly! Here's a suggested section for what you've tried and what you were expecting:

What I Tried: I've taken the following steps to troubleshoot the issue:

Checked Responsive Styles: Ensured that the styles for the UserButton component are responsive and suitable for smaller screens. Verified that the button should adapt to different screen sizes.

Error Console: Inspected the browser console for any error messages or warnings related to the UserButton. However, no errors were displayed during the testing.

Browser Compatibility: Tested the application on different browsers on my mobile device to rule out any browser-specific issues.

Expectations: I expected the UserButton component to function consistently across different screen sizes and devices. When clicking the button on a smaller screen or mobile device, I anticipated the dialog box to open and allow interaction with the authentication features, just like it does on a full-size laptop screen.

Unfortunately, despite these efforts, the UserButton dialog box closes immediately after clicking when using the application on a mobile device or with a smaller screen resolution.

I'm seeking guidance on potential solutions or insights into why the UserButton behaves differently on mobile screens. Any assistance or suggestions would be greatly appreciated.

Answer 1

i think i know this snippet.

This might be because of the overlapped z-index between shadcn's sheets and clerks userbutton's popover. You'll find it if you inspect the devtools.

However, editing the z-index itself through userProfileProps won't solve the problem. the userbutton's popover will still stay behind the shadcn's sheet.

There are couple workarounds:

1. you can set userProfileMode in your UserButton to navigation when it is rendered inside the Sheet component, or
2. you can create a custom component to render your Clerk Profile UI and use UserProfile instead of UserButton, since clerk will also render UserProfile once you click on Manage Account from UserButton

p.s: however if you have already solve this overlap problem, it would be great if you can share the solution.