grid layout keeps 8 columns under mdc-layout-grid__cell--span-4-phone rule

What MDC Web Version are you using?

My angular 7.2.2 project is using:

    "@material/layout-grid": "^0.41.0"

What browser(s) is this bug affecting?

Chrome 72, Firefox 62

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

<div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell--span-4-phone 
                            mdc-layout-grid__cell--span-8-tablet 
                            mdc-layout-grid__cell--span-12-desktop">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

According to responsive layout documentation (https://material.io/design/layout/responsive-layout-grid.html#breakpoints), the browser under 599px activates xsmall breakpoint so it should be only 4 columns. However we got 8 columns yet.

What is the expected behavior?

Should be only 4 columns under 599px since we specify mdc-layout-grid__cell-span-4-phone.

What is the actual behavior?

The snippet above only goes to 4 columns when the browser width is under 479px. We have tested the material breakpoint itself. The breakpoint xsmall is working fine, but mdc-layout-grid is not respecting the rule of 4 columns for xsmall starting at 599px, it just work under 479px.

[dawsonc623]

I just ran into this as well. I ran a few searches on this repository, and it looks like layout grid and snackbar are the only ones that still use 480px as the phone/tablet breakpoint. It should be a pretty quick PR to get those fixed.

[acdvorak]

Thanks for filing this issue! 😀

It looks like our breakpoints haven’t been updated with the latest values from the Guidelines:

• Guidelines: 599px
• MDC Web: 479px

We should ensure that breakpoint values are consistent across all of our components.