fix(material/tabs): make MatTab _scrollheader function smarter to display content fully (#26737)

Author: clamli

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

@@ -63,6 +63,12 @@ export type ScrollDirection = 'after' | 'before';
  */
 const EXAGGERATED_OVERSCROLL = 60;
 
+/**
+ * The distance in pixels added on top of the scroll amount when using paginations to scroll a
+ * tab list. It is used to compensate for the padding on either side of a label.
+ */
+const REDEEMING_OVERSCROLL = 24;
+
 /**
  * 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.
@@ -468,18 +474,37 @@ export abstract class MatPaginatedTabHeader
 
   /**
    * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
-   * the end of the list, respectively). The distance to scroll is computed to be a third of the
-   * length of the tab list view window.
+   * the end of the list, respectively). The distance to scroll is computed to be the smaller value
+   * between the remaining space to the (left/right) border and a third of the length of the tab
+   * list view window.
    *
    * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
    * should be called sparingly.
    */
   _scrollHeader(direction: ScrollDirection) {
     const viewLength = this._tabListContainer.nativeElement.offsetWidth;
 
-    // Move the scroll distance one-third the length of the tab list's viewport.
-    const scrollAmount = ((direction == 'before' ? -1 : 1) * viewLength) / 3;
+    // 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.
+    let minLeftSpace = Number.MAX_SAFE_INTEGER;
+    let minRightSpace = Number.MAX_SAFE_INTEGER;
+    this._items.toArray().forEach(tab => {
+      const {offsetLeft, offsetWidth} = tab.elementRef.nativeElement;
+      const leftSpace = offsetLeft - this.scrollDistance + REDEEMING_OVERSCROLL;
+      const rightSpace =
+        viewLength - (offsetLeft + offsetWidth - this.scrollDistance) + REDEEMING_OVERSCROLL;
+      if (leftSpace > 0) {
+        minLeftSpace = Math.min(minLeftSpace, leftSpace);
+      }
+      if (rightSpace > 0) {
+        minRightSpace = Math.min(minRightSpace, rightSpace);
+      }
+    });
 
+    const scrollAmount =
+      direction == 'before'
+        ? -Math.min(minRightSpace, viewLength / 3)
+        : Math.min(minLeftSpace, viewLength / 3);
     return this._scrollTo(this._scrollDistance + scrollAmount);
   }