Issue with the new avatar navigation menu

[webdacjs]

Je suis conscient que la problématique liée à la nouvelle navigation, utilisant le menu déroulant avec l'avatar, a été abordée et implémentée via https://github.com/epfl-si/elements/pull/668. Cependant, un problème persiste que je souhaite signaler.

D'après les captures d'écran partagées sur les différentes plateformes, ainsi que l'exemple présenté dans le guide officiel de ce composant, l'intention est que la photo de l'utilisateur apparaisse à l'intérieur d'un cercle, comme illustré ici:

https://epfl-si.github.io/elements/#/atoms/nav-user

et c'est effectivement le cas si les dimensions de l'image en termes de largeur et de hauteur sont symétriques. Cependant, si les dimensions ne sont pas équivalentes, elles peuvent conduire à des images qui ressemblent à un œuf:

ou peut ressembler à un ellipsoïde si la largeur est supérieure à la hauteur:

Peut-être que cela pourrait être corrigé en ajoutant un object-fit : cover et un height : var(--avatar-size); à la classe user-dropdown .btn .user-avatar ?

user-dropdown .btn .user-avatar {
    --avatar-size: 2.5rem;
    flex-basis: 2.5rem;
    flex-basis: var(--avatar-size);
    width: 2.5rem;
    width: var(--avatar-size);
    object-fit: cover;
    height: var(--avatar-size);
}