[Drawer] mini variant icon alignment bug

[greg-schrammel]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Drawner ListItem icons should be aligned center.

Current Behavior 😯

ListItemIcon get weard left margin

Steps to Reproduce 🕹

you can reproduce in the docs drawner mini variant https://material-ui.com/demos/drawers/

Link:

1. https://codesandbox.io/s/k38j686l1v

Your Environment 🌎

Tech	Version
Material-UI	v3.7.0 and v3.7.1
React	v16.7.0

[joshwooding]

This is due to the width including the scrollbar so it doesn't cover the icon but when the scrollbar is hidden the width is wrong.

[sehcheese]

Any timeframe on a fix for this? Thanks for your work!

[Lani]

Just to add some more information, and hopefully, find a solution:

For me, this is working in v3.9.3. But when upgrading to v4.3.2 I also get this problem. It is also visible in the official code sandbox example for the latest version: https://codesandbox.io/s/ti7w3

When I compare the active css classes in the dev tools in chrome I can see that v3.9.3 have this media query:

@media (min-width: 600px)
.MuiListItem-gutters {
    padding-left: 24px;
    padding-right: 24px;
}

But it's missing in v4.3.2.

I've tracked the problem to this change/commit: 8028253#diff-10051efc76b52eae0f0883192986491d

As a workaround, I re-added the theme.mixins.gutters() call for my ListItem component:

const styles = theme => ({
  gutters: theme.mixins.gutters(),
});

<ListItem classes={{ gutters: classNames(classes.gutters) }}>
</ListItem>

I don't know how to classify this, but I think that the mini drawer example is not complete now, as it center aligns the icons on small screens but not on large screens. Ideally, the scrollbars visibility should be taken into account as well.

I hope this helps :)

[siriwatknp]

This issue is outdated (MD2 related). We aim to have a fresh look for Material UI in the near future, so I’m closing this.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@greg-schrammel How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.