Material-ui: Tabs text overflow with scrollable and fullwidth

[mrmojica]

The tab labels get cut off when in mobile/small view. This occurs when setting the fullWidth prop to true in mobile view and having scrollable and scrollButtons. I do understand that if labels are too long for the tabs it will overflow and not be visible and when using fullWidth you should not have too many tabs. But if scrollable and scrollButtons are set it would be expected that the tabs should not need to shrink.

Example of the issue: https://codesandbox.io/s/1qojj44k6j

Should the fullWidth and scrollable, and scrollButtons props not be intended to be used this way?

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

If fullWidth, scrollable and scrollButtons are set it would be expected that the tabs should not need to shrink. Maybe have an override that sets MuiTab-fullWidth: { flexShrink: 0 }.

Current Behavior

The tab shrink and labels get cut off when in mobile/small view when using fullWidth, scrollable, and scrollButtons prop.

Steps to Reproduce

Link: https://codesandbox.io/s/1qojj44k6j

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.5.1 |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

This occurs when setting the fullWidth prop to true in mobile view and having scrollable and scrollButtons.

We should warn against this combination. They are incompatible. Either the tab is full width or it scroll. It can't do both at the same time.

[mrmojica]

Thank you for clarifying this!

[mbrookes]

Sounds like we need to add a variant prop and deprecate these props...