Wrap user menu email label in a dropdown group

DropdownGroupLabel renders Base UI's Menu.GroupLabel, which requires a
Menu.Group ancestor. The user menu rendered the label directly in the
popup, so opening it threw a missing MenuGroupContext error. Wrap the
email label in a DropdownGroup.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/src/components/TopBar/TopBarUserMenu.tsx

@@ -15,6 +15,7 @@
 import { CaretDownIcon, SignOutIcon, UserIcon } from "@phosphor-icons/react";
 import { Avatar } from "@probo/ui/src/v2/Avatar/Avatar";
 import { Dropdown } from "@probo/ui/src/v2/Dropdown/Dropdown";
+import { DropdownGroup } from "@probo/ui/src/v2/Dropdown/DropdownGroup";
 import { DropdownGroupLabel } from "@probo/ui/src/v2/Dropdown/DropdownGroupLabel";
 import { DropdownItem } from "@probo/ui/src/v2/Dropdown/DropdownItem";
 import { DropdownPopup } from "@probo/ui/src/v2/Dropdown/DropdownPopup";
@@ -62,7 +63,9 @@ export function TopBarUserMenu({ identityKey }: TopBarUserMenuProps) {
         )}
       />
       <DropdownPopup align="end">
-        <DropdownGroupLabel>{identity.email}</DropdownGroupLabel>
+        <DropdownGroup>
+          <DropdownGroupLabel>{identity.email}</DropdownGroupLabel>
+        </DropdownGroup>
         <DropdownSeparator />
         <DropdownItem color="error" iconStart={<SignOutIcon />}>
           {t("userMenu.signOut")}