Profile pages force square user avatar

[jhenshaw]

Steps to reproduce the problem

1. Visit your on-instance profile where the user has uploaded a non-square avatar image with transparency (e.g. https://instance.com/web/accounts/1)
2. Notice that the avatar region forces a black-background and gray border around it, looking bad. Other Mastodon instances of same avatar use transparent backgrounds propertly.
3. Looks like component.scss line 6935 but I'm not positive the is the only / correct source of the style.

See attached for demonstration of bug and how it should look.

Note that this behaves correctly on public profile views, so this is a very minor issue. If you hit https://instance.com/@account, you see:

which is how it should look on all pages.

Expected behaviour

Transparent background and border around avatar images on user profile page

Actual behaviour

Forced-black background and gray border around avatar image (see attached images)

Specifications

tootsuite/mastodon Web FE v3.1.3

[patrick91]

I've done a custom css for my custom instance, if this is interesting for everyone I can make a PR here :)

The PR removes the background and the negative margin from the avatar in the profile page. Example here: https://social.python.it/@pycon