Material-components-web: grid layout keeps 8 columns under mdc-layout-grid__cell--span-4-phone rule

[EsterPermon]

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.

[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.

[amadeubarbosa]

In fact MDC Web (master) defines the breakpoint variables as following:

$mdc-layout-grid-breakpoints: (
  desktop: 840px,
  tablet: 480px,
  phone: 0px
) !default;

@EsterPermon, we could use this workaround (overriding map values after import material scss):

@import '~@material/layout-grid/mdc-layout-grid.scss';

$mdc-layout-grid-breakpoints: (
  desktop: 840px,
  tablet: 600px, // fix
  phone: 0px
) !default;

[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.

[SerkanSipahi]

Any updates here? We are working with angular v8 and their flexModule which give us a ResponsiveAPI (https://github.com/angular/flex-layout/wiki/Responsive-API) which is consist with Material-Styleguide. There are some cases where we want to use css (e.g. xs, sm, md, .., .., lt-sm, ..., ...) classes on any element but mdc (material-components) is not consists with Material Styleguide.

We hope that this bug will be fixed soon :)

[asyncLiz]

Fixed in #5607

[dawsonc623]

@asyncLiz Did this get fixed in snackbar as well? I know this issue was specifically about layout grid, but I mentioned above snackbar still uses the old breakpoint as well.

[asyncLiz]

I created https://github.com/material-components/material-components-web/issues/5629 to address the snackbar. That one is a little more ambiguous than this one. We'll get some guidance on design for what the 100% width breakpoint should be for snackbar.