Material: Now Broken - how to make md-list-item item row height smaller

[kasajian]

Background. I had a problem with adjusting the height of an mdList. I solved it last week, but new changes on master broke ig.

Original problem

I described the original issue here:
https://github.com/angular/material/issues/7277

If I just use mdList normally, I'll get a list that looks something like this:

Too much gap between each line. So I add some styling and I get the following:

Which is much better. The following pen shows the change made: http://codepen.io/kasajian/pen/XdrrQY

Now, this pen uses version 1.0.5 of the library. Namely, the following URLs are used:

https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.css
and
https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.js

New problem

Now, when I use the version of the library on 'master', things don't look so good:

URLs I'm using to point to master:
https://gitcdn.link/repo/angular/bower-material/master/angular-material.css
and
https://gitcdn.link/repo/angular/bower-material/master/angular-material.js

Here's a pen that demonstrates the problem: http://codepen.io/kasajian/pen/dMPvZM

I did a diff on the what's changed, and I notice that the some of the classnames now have an underscore in front. Namely, in the style section:

md-list-item, md-list-item .md-list-item-inner, md-checkbox {
    min-height: 100%;
}

md-list-item-inner is renamed to have an underscore in front of it. However, making that simple change doesn't do it. I figured out that the above style can be replaced with this:

md-list-item {
    min-height: 100%;
    height: 2em;
}

So I'm curious is this a correct solution? Is there something I can do to remain resilient to these types of changes in the future?

[ThomasBurleson]

Please post this in the Angular Material Forum

[garretwilson]

Can someone clarify what's going on here? Is this a bug? Is this not a bug? Is this baked into material? Was anything posted in the Angular Material Forum? Why do my list items looks so big? Thanks; I'm sure I'm not the only one with this question.

[chukonu]

I do it in this way:

md-list-item {
    height: 2em;
    min-height: initial; // initial makes better sense than 100%?

    // add these if the list contains actions
    // and you might need to add more for other cases, i haven't fully investigated
    .md-button, .md-list-item-inner, .md-secondary-container {
        height: 2em;
        min-height: initial;
    }
}