Chevrons/Arrows overlap tabs in scrollable tab panel

> What MDL Version are you using? (please be specific, e.g. _major.minor.patch_)

1.2.1

> What browser(s) is this bug affecting (including version)?

Chromium 53.0.2785.143 on Debian and Chrome 54.0.2840.68.

> What OS (and version) are you using?

Debian 8.6 and Android 6.0.0.

> What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?
- go to http://codepen.io/anon/pen/xENVjb
- change view so that preview is on the right
- reduce the width of preview to something small (until chevrons/arrows appear)
- click the right chevron

> What is the expected behavior?

all Tab links should be visible

> What is the actual behavior?

Tab 6 disappears under the right chevron and is invisible

> Any other information you believe would be useful?

I think this is due to a bug calculating the width of the tab bar. Relevant code in the css:

``` css
@media screen and (max-width: 1024px)
.mdl-layout__tab-bar {
width: calc(100% - 60px);
padding: 0 0 0 60px;
}
```

(generated from lines 500-505 in `_layout.scss`).

Here 60px are subtracted from the width. However, there is one chevron/arrow on each side and each takes up 60px. So changing the relevant CSS to:

``` css
@media screen and (max-width: 1024px)
.mdl-layout__tab-bar {
width: calc(100% - 120px);
padding: 0 0 0 60px;
}
```

fixes the problem (see CSS in the codepen).