Data Grid Avatar Bug (?)

[ceyerkes]

Hi! I noticed when switching the data grid content type to Avatar, the "initial" content variant has a square stroke around the initial circle, which i think is unintentional:

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Table cell avatar content bug (updated: 08/31/2023, similarity score: 91%)
• Illustration placeholder size in the empty card component (updated: 09/08/2023, similarity score: 83%)
• Sidebar navigation bug (updated: 09/08/2023, similarity score: 83%)

[dosubot[bot]]

This isn't an intentional design—what you're seeing is the result of the circular Avatar being placed inside a Data Grid cell, which always has a square border. When the avatar is large or the cell padding is tight, the cell's border can look like a square stroke around the avatar. The Avatar component itself uses a circular border radius and a box-shadow for its border, but doesn't add a square stroke to the initials variant. The visual bug is just the cell border showing through due to the layout and sizing of the content.

To fix this, try increasing the cell padding, reducing the avatar size, or customizing the cell's border or background to create more visual separation between the avatar and the cell border. This is a common edge case when composing flexible UI components like these, and tweaking the spacing usually resolves it. You can see the Avatar and Data Grid implementations for more details on their default styles and how they interact: Avatar implementation.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[roxanagomez]

Hey @ceyerkes thank you for sharing, I just published a fix for this. It seems the Avatar nested in the cell content had an unnecessary stroke and it was causing this issue. Let me know if this fix solved it. Thank you!

[ceyerkes]

thank you!! that worked.