[MenuItem] Long secondary text covers next menu item

[ShadowMen]

Problem Description

When I create a menu item, within an icon menu, with a large text and a large secondary text, the secondary text will break into a new line, but still floats on the right side and cover the next menu item text.

Versions

• Material-UI: 0.14.4 & 0.15.0-alpha.1
• React: 0.14.7
• Browser: Google Chrome 48

[mbrookes]

@heetvachhani I think this is your speciality! 😆 Care to take a look?

[heetvachhani]

Thanks @mbrookes! but it's @tintin1343 speciality. 😁
Sure we will take a look 👍

[tintin1343]

@ShadowMen : Do you need something like this?

Check the secondary text on Superscript

Also how long is the secondary text? As per Google's Material design spec, every menu item should account for one line only. So if you have a long secondary text which doesn't fit in one line means you might have to make an effort to rephrase it to keep it to one line and not let it overflow.

We can still make it better using ellipsis. But it won't be as informative as it should be and won't serve the purpose.

@mbrookes : What do you think? I don't think it is a bug.

[nathanmarks]

@ShadowMen @tintin1343 This has been re-opened due to a regression the fix caused. The fix needs to be implemented in a different way (ie, not use flex while list item doesn't use flex) as to not cause regressions in the current setup.

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.