Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Card] Use flex display for CardHeader.avatar #23169

Merged
merged 1 commit into from
Oct 20, 2020
Merged

[Card] Use flex display for CardHeader.avatar #23169

merged 1 commit into from
Oct 20, 2020

Conversation

mordechaim
Copy link
Contributor

@mordechaim mordechaim commented Oct 19, 2020

I noticed the avatar is not properly aligned with the title when using an icon (it was fine if I used the Avatar component to wrap the icon). Inspecting the element I noticed the flex properties being set but the display wasn't set to flex. Changing this fixed the issue.

@mui-pr-bot
Copy link

Details of bundle changes

Generated by 🚫 dangerJS against 92adfb1

@oliviertassinari oliviertassinari changed the title Use flex display for avatar [Card] Use flex display for CardHeader. avatar Oct 19, 2020
@oliviertassinari oliviertassinari changed the title [Card] Use flex display for CardHeader. avatar [Card] Use flex display for CardHeader.avatar Oct 19, 2020
@oliviertassinari oliviertassinari added the component: card This is the name of the generic UI component, not the React module! label Oct 19, 2020
@oliviertassinari
Copy link
Member

@mordechaim Thanks for spending time on this. Do you have a reproduction of the issue?

@mordechaim
Copy link
Contributor Author

mordechaim commented Oct 19, 2020

Edit interesting-mayer-svgvc

This shows the original layout, with flex, and with avatar wrapper without flex.

@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Oct 19, 2020
@mordechaim
Copy link
Contributor Author

Btw action similarly has flex properties but not set to display: flex. But I see it has margins which offset it from the center even with flex so I wasn't sure what to do there.

@oliviertassinari oliviertassinari merged commit 397d599 into mui:next Oct 20, 2020
@oliviertassinari
Copy link
Member

@mordechaim It's a great first pull request on Material-UI 👌🏻. Thank you for working on it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: card This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants