Avatar in Button leadingVisual slot does not properly size img due to conflicting styles

[jonrohan]

Browser

Description

There’s a visual bug in the Button component: when passing an Avatar into the leadingVisual slot, the Avatar's image does not render with the correct width. This seems to be caused by a collision between global styles (e.g. img { max-width: 100% }) and less-specific Avatar styles (width: 20px via CSS var). Because Button uses min-content for the leadingVisual grid area, max-width sometimes resolves to 0, causing the image to shrink unexpectedly.

Setting min-width: var(--avatarSize-regular); alongside width on the Avatar CSS appears to solve the problem more generally, ensuring Avatars don’t shrink and always use the intended size.

Steps to reproduce

1. Render a Button component using an Avatar as the leadingVisual prop/value.
2. Example: navigate to a Button with an Avatar at the bottom of https://github.com/marketplace/lovablebot
3. Observe the Avatar image does not retain the expected width.

Version

View original Slack conversation