style(avatar): oversizing of avatar on small screens

[hritvi]

fixes #5313

It now looks like this on mobile view:

@ryanfeeley Please review.

[ryanfeeley]

@hritvi Looks fantastic! As the designer, I'm not sure if I should be approving the code here. @shane-tomlinson ?

[lmorchard]

I can take a peek here!

Edit: Hmm, actually maybe not. I don't have an iOS device, and I'm having trouble reproducing the original issue with a rotated photo. I'm not sure how the CSS here would address that - or how the original CSS would have caused it.

I'm wondering if there's a further issue with how we're actually handling the image and any rotation info in EXIF data. (Kind of guessing here)

[lmorchard]

Yeah, I think I'm super confused by this issue. I found a tall sample image with different EXIF data values and didn't see the squash or rotation from #5313. Also looks like things are a little off, at least where I'm trying it on Linux

Master:

This PR:

[hritvi]

@lmorchard I think so the squash and rotation errors were resolved by some other PR as even I was unable to replicate that. There was another issue, that is #7045, which was closed as a dup of #5313 and it stated about the oversizing of profile images.
Therefore this PR only addresses the oversizing of profile images. zcould you now take a look at it please. Thanks 🙂

[lmorchard]

Well, I didn't see the rotation & squash issues, but I did see an issue in this PR with the image being off-center in my screenshots. Not sure what might be causing that - maybe the left: 0 here? That doesn't seem like it should cause a problem though

[shane-tomlinson]

This repo has been deprecated and migrated to https://github.com/mozill/fxa. Please open this PR against that repo.