scrollbar disappears when clicking dropdown menu

import { signIn, signOut, useSession } from "next-auth/react";
import { buttonVariants } from "../ui/button";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function SignInButton() {
  const { data: session } = useSession();

  if (session && session.user) {
    return (
      <DropdownMenu>
        <DropdownMenuTrigger className="right-0 outline py-2 px-2 rounded-md">User</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>Subscription</DropdownMenuItem>
          <DropdownMenuItem onClick={() => signOut()}>LogOut</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }

  return (
    <button className={buttonVariants({ variant: "outline" })} onClick={() => signIn()}>
      LogIn
    </button>
  );
}

I used shadcn Dropdown menu, and when I click it, the menu button move right and chrome scroll bar disappear. what should i do? can i solve it with tailwind css?

This drove me crazy! I had this same issue 😤. You can fix it by adding just one line of CSS to your global styles:

/* globals.css */

#__next {
    @apply h-full;
    overflow-y: scroll;
}

This makes sure the scrollbar space is always there, so your content doesn't jump around.