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

Author: clamli

src/material/legacy-tabs/tab-header.spec.ts

@@ -743,7 +743,7 @@ class SimpleTabHeaderApp {
   focusedIndex: number;
   disablePagination: boolean;
   disabledTabIndex = 1;
-  tabs: Tab[] = [{label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}];
+  tabs: Tab[] = [{label: 'tab one'}, {label: 'tab two'}, {label: 'tab three'}, {label: 'tab four'}];
   dir: Direction = 'ltr';
 
   @ViewChild(MatLegacyTabHeader, {static: true}) tabHeader: MatLegacyTabHeader;

src/material/tabs/paginated-tab-header.ts

@@ -57,12 +57,6 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({
  */
 export type ScrollDirection = 'after' | 'before';
 
-/**
- * The distance in pixels that will be overshot when scrolling a tab label into view. This helps
- * provide a small affordance to the label next to it.
- */
-const EXAGGERATED_OVERSCROLL = 60;
-
 /**
  * Amount of milliseconds to wait before starting to scroll the header automatically.
  * Set a little conservatively in order to handle fake events dispatched on touch devices.
@@ -524,10 +518,13 @@ export abstract class MatPaginatedTabHeader
 
     if (labelBeforePos < beforeVisiblePos) {
       // Scroll header to move label to the before direction
-      this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
+      this.scrollDistance -= beforeVisiblePos - labelBeforePos;
     } else if (labelAfterPos > afterVisiblePos) {
       // Scroll header to move label to the after direction
-      this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
+      this.scrollDistance += Math.min(
+        labelAfterPos - afterVisiblePos,
+        labelBeforePos - beforeVisiblePos,
+      );
     }
   }
 

src/material/tabs/tab-header.spec.ts

@@ -742,7 +742,7 @@ class SimpleTabHeaderApp {
   selectedIndex: number = 0;
   focusedIndex: number;
   disabledTabIndex = 1;
-  tabs: Tab[] = [{label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}];
+  tabs: Tab[] = [{label: 'tab one'}, {label: 'tab two'}, {label: 'tab three'}, {label: 'tab four'}];
   dir: Direction = 'ltr';
   disablePagination: boolean;