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?
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. |
|
The tab labels get cut off when in mobile/small view. This occurs when setting the
fullWidthprop to true in mobile view and havingscrollableandscrollButtons. I do understand that if labels are too long for the tabs it will overflow and not be visible and when usingfullWidthyou should not have too many tabs. But ifscrollableandscrollButtonsare set it would be expected that the tabs should not need to shrink.Example of the issue: https://codesandbox.io/s/1qojj44k6j
Should the
fullWidthandscrollable, andscrollButtonsprops not be intended to be used this way?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