fix(ui): profile name gets cut off by roles

[Christopher-Hayes]

Description

Fixes the UI issue with the profile name getting cut off when the user has roles.

On the bottom-left profile card, the roles UI was moved to be below the username.

It could be in-between the name and username, but because this is a list of roles, for some users that list would look better as the last list item.

Minor tweaks

For this taller profile info card, the avatar was centered. AccountHoverCard.vue originally was not using the hoverCard prop on AccountInfo.vue, this was added since the hover card has the space to show roles inline with the profile name.

Screenshots

Before:

After:

The hover card remains untouched since it has the extra space:

Mobile:

Multiple users:

Misc

• [X] Linted
• [X] Passed tests

fixes: #2914