[Tabs] Labels reduce their width based on the screen rather than container

Bug, feature request, or proposal:

Probably a bug (?)

What is the current behavior?

Here’s my app in desktop mode : (sidenav has a fixed width : 320px)

Notice the way tabs are displayed on the left :

When I open the app on my mobile :

1 or 2 versions of material2 before, tabs where displaying the same way. I didn’t take the time to open this issue before.

What is the expected behavior?

I’d like to have smaller tabs on desktop mode

What are the steps to reproduce?

Here’s the funniest part : I tried to reproduce with a Plunkr : http://plnkr.co/edit/aGPvdK8qUL1jEBWXxYn4?p=preview

It’s working as expected and not like on my site.

Still, I’m opening this issue in case there’s some edge case you may be aware of.

Feel free to close it as I couldn’t reproduce.

I didn’t apply custom css so I don’t understand where this is coming from.

If you really want to repro my problem, you can launch those commands to setup my project and you’ll be running the app in a minute :

git clone https://gitlab.com/victornoel/petals-cockpit.git
git checkout ee685d5
cd petals-cockpit/frontend
yarn
ng serve

Then go to http://localhost:4200/workspaces/idWks0

Which versions of Angular, Material, OS, browsers are affected?

Material 2.0.0-beta.1 Ubuntu 16.10 Chromium 55.0.2883.87

[codegastudio]

@andrewseguin md-stretch-tabs not working to stretch tabs in desktop browser with 2.0.0 beta.6 😕

[andrewseguin]

This is due to the CSS rule in tab-header.scss:

@media ($md-xsmall) {
  .md-tab-label {
    min-width: 72px;
  }
}

We say that if the screen is small, then the labels should change their min-width from 160px to 72px. I would say that rather than looking at the screen width, we should look at the tab header width instead.

For now to fix your issue, you can set your own custom CSS rule that always sets the min-width as 72px. We will consider how to modify this rule in the library so that it will use the tab header’s width rather than the screen.