fix(material/tabs): update MatTab _scrollToLabel function to always display a label from its start

[clamli]

_scrollheader() computes the distance to move a tab list. Originally it set the scroll amount to a third of the length of the tab list view window, which did not consider the length of the tab label itself. When the screen size is small, the label might be clipped and not completely readable on its own and users see just the left or right of the tab text.

This PR updates _scrollheader() function to make it smarter on distance calculation. It introduced two variables,

• minLeftSpace: the distance from the first fully rendered label to the left border of the viewport.
• minRightSpace: the distance from the last fully rendered label to the right border of the viewport.

Now the new scroll amount is,

• 'before' direction: MINIMUM(minRightSpace, 1/3 * viewLength)
• 'after' direction: MINIMUM(minLeftSpace, 1/3 * viewLength)

This way, the moving distance would be guarded by the remaining space on either side of the label and we can make sure the label would not be clipped.

As discussed offline, it would be hard to display a label fully when it is long without causing any UI regression. A reasonable compromise would be to ensure that the first part of each label is readable and is distinct from other labels.

We update _scrollToLabel function to always display a long label from its start, this way, we at least make sure the first part of it is readable. What the exact changes are,

• set scrollDistance so that it will always align the border of the viewport to the head or tail of the focused label
• remove EXAGGERATED_OVERSCROLL because that will add disruption to the moving strategy we are using
• update the tab names used in the unit tests to make sure the length of the tabs is always larger than the maximum scroll distance.

Demo:

[crisbeto]

The behavior and runtime code LGTM, but the tests can be improved.

[crisbeto]

LGTM

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}