fix: prevent user avatar from shrinking

[kettanaito]

The user avatar element on the /users/:username/notes page shrinks, resulting in a broken UI:

This is even more apparent with a placeholder avatar:

This happens because the Link parent has display: flex and the text content (the user name) takes priority when it grows, shrinking the image.

Now, traditionally, you fix this by setting flex-shrink: 0 on the element whose dimensions you wish to preserve. Alas, the component tree of the Img component doesn't make that fix possible as the classes you provide to the component end up on the <img /> element and not the parent <picture /> element, which is the child of the flex container:

<Link>
  <picture> // <- shrink-0 needs to go here
    <img> // <- but it ends up going here

As such, I'm proposing the next best thing, which is to fallback to the next responsive state of this element sooner:

This makes the avatar/username wrap sooner, preventing the shrunk avatar issue.

Test Plan

Checklist

• Tests updated
• Docs updated

Screenshots

[kentcdodds]

Good catch. Thanks!