I have this table which lists the users. When i click on "edit account" a dropdown menu is opened from headlessUI. But somehow it influences the table, as it adds a scrollbar and sometimes I have to scroll down to see the whole content of the dropdown. But I want the dropdown to be on top of everything. When I use it outside the table it works like a charm...

function Dropdown({ targetUser }) {
        return (
            <Menu as="div" className="relative inline-block text-left">
                <Menu.Button className="text-blue-500 hover:text-blue-400">Edit account</Menu.Button>
                <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                    {links.map((link) => (
                        <Menu.Item key={link.href} as={Fragment}>
                            {({ active }) => (
                                <div className="bg-neutral-800 shadow text-neutral-300 w-full">
                                    <button
                                        onClick={() => {setFocusedUser(targetUser); link.func()}}
                                        className={`${
                                            active ? "text-blue-300" : ""
                                        } block py-2 w-56`}
                                    >
                                        <div className="text-left ml-2">
                                            {link.label}
                                        </div>
                                    </button>
                                </div>
                            )}
                        </Menu.Item>
                    ))}
                </Menu.Items>
            </Menu>
        );
    }