[breakpoints] Extra-small defined as 360px, excludes devices in MD Device Metrics guide

[kgregory]

First, let me commend the team on the work that has been put into the next branch. It is fantastic and your effort is greatly appreciated, so thank you.

The extra-small break point starts at 360px (as defined in /src/styles/breakpoints.js), which excludes several devices on the Material Design Device Metrics list. Granted, theses excluded devices are watches and some older phones, but I think the definition of extra-small should follow the guide presented in the Responsive UI - Breakpoints section of Material Design and start at 0px.

Using JSS, the only way to style something smaller than extra-small is to use:

    [theme.breakpoints.down('sm')]: { ... },

There is a problem with using this approach, which was logged in issue #6503 and PR #6504

The following rule no longer applies to any viewport smaller than 360px:

    [theme.breakpoints.only('xs')]: { ... }

We could add two rules to cover all extra-small devices, but it seems unnecessary:

   [theme.breakpoints.only('xs')]: { ... }
   [theme.breakpoints.down('xs')]: { ... }

I think extra-small should represent the smallest viewports and start at 0px.

Seems like a quick enough fix, if you would like me to submit a PR, it would be no trouble. Thanks!

[oliviertassinari]

@kgregory Good catch! It was fixed in #9078.