absolute positioned element to the right above other content - css-position

Question

I am trying to position a panel to the right of avatar icon. i want to make it look like the supabase dashboard.
i have the following already. iam using tailwindcss and tailwind/headlessui for the popover
<Popover className="relative flex flex-col items-center">
<Popover.Panel
className="absolute -top-32 right-0 z-50 w-screen max-w-[270px] px-4 sm:px-0 translate-x-full ">
<div className="overflow-hidden rounded-sm shadow ring-1 ring-black ring-opacity-5">
<div className="block w-full h-12 bg-blue-50 py-3 px-3 content-center">
<div>
{
(isLoading || isError) ? (
<div role="status" className="space-y-2.5 animate-pulse max-w">
<div className="h-2.5 bg-gray-200 rounded w-full"></div>
</div>
) : (
<h4 className="font-semibold">
{user.email}
</h4>
)
}
</div>
</div>
<div className="relative grid grid-cols-1 gap-4 bg-white py-7 ">
<div className="flex flex-col gap-6">
<PanelItem content="Wishlist" href="/v/wishlist">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</PanelItem>
</div>
</div>
<Button variant="primary" className="rounded-none" onClick={handleSignOut}>
<span className="text-sm font-medium" >Sign Out</span>
</Button>
</div>
</Popover.Panel>
</Popover>
it looks like this.
but should look like this