bug(mat-tab,mat-button): v15 using mat-button in mat-tab trigger weird y-scroll

[CroMarmot]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v14

Description

in v15, using mat-button inside mat-tab, their will be a weird y-scroll

when i put more button, or change whe window width, the mat-tab height changed but the y-scroll still exist

---

however, if use default button or pure text, or add css, it's working properly

button{
  margin-bottom: 6px;
}

---

previous version

git show 450df7f1c768b6a5e660898fd789d5f2c2353672 -- package.json
commit 450df7f1c768b6a5e660898fd789d5f2c2353672
Author: cromarmot <yexiaorain@gmail.com>
Date:   Sun Jan 1 07:45:07 2023 +0800

    update ng 14 -> 15

diff --git a/package.json b/package.json
index 6eb52c7..c8e4e0f 100644
--- a/package.json
+++ b/package.json
@@ -10,18 +10,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-eslint/schematics": "1.0.0",
-    "@angular/animations": "^14.1.2",
-    "@angular/cdk": "^14.1.2",
-    "@angular/common": "^14.1.2",
-    "@angular/compiler": "^14.1.2",
-    "@angular/core": "^14.1.2",
-    "@angular/forms": "^14.1.2",
-    "@angular/material": "^14.1.2",
-    "@angular/platform-browser": "^14.1.2",
-    "@angular/platform-browser-dynamic": "^14.1.2",
-    "@angular/router": "^14.1.2",
-    "@angular/service-worker": "^14.1.2",
+    "@angular-eslint/schematics": "15.1.0",
+    "@angular/animations": "^15.0.4",
+    "@angular/cdk": "^15.0.3",
+    "@angular/common": "^15.0.4",
+    "@angular/compiler": "^15.0.4",
+    "@angular/core": "^15.0.4",
+    "@angular/forms": "^15.0.4",
+    "@angular/material": "^15.0.3",
+    "@angular/platform-browser": "^15.0.4",
+    "@angular/platform-browser-dynamic": "^15.0.4",
+    "@angular/router": "^15.0.4",
+    "@angular/service-worker": "^15.0.4",
     "echarts": "^5.2.2",
     "ngx-echarts": "^8.0.0",
     "ngx-markdown": "^14.0.0",
@@ -30,9 +30,9 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.1.2",
-    "@angular/cli": "^14.1.2",
-    "@angular/compiler-cli": "^14.1.2",
+    "@angular-devkit/build-angular": "^15.0.4",
+    "@angular/cli": "^15.0.4",
+    "@angular/compiler-cli": "^15.0.4",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.7.0",
@@ -41,6 +41,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.8.4"
   }
 }

Reproduction

Steps to reproduce:

1. fork the official stackblitz components issue
2. use tab code from here
3. and the button code from here
4. remove style code in 'example-component.css'

in stackblitz

---

reproduce code

<mat-tab-group>
  <mat-tab label="First">
    <button mat-button>Basic Button</button>
    <button mat-button>Basic Button</button>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Expected Behavior

y-scroll don't show up, and cannot scroll

Actual Behavior

y-scroll show up, and it can scroll

Environment

My computer(Same Issue)

Angular CLI: 15.0.4
Node: 16.13.0
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.4
@angular-devkit/build-angular   15.0.4
@angular-devkit/core            15.0.4
@angular-devkit/schematics      15.0.4
@angular/cdk                    15.0.3
@angular/material               15.0.3
@schematics/angular             15.0.4
rxjs                            6.6.7
typescript                      4.8.4

• Browser(s):
  • Chrome: Version 108.0.5359.94 (Official Build) (64-bit)
  • Firefox: 108.0.2 (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu):
  • Ubuntu22.04.1 LTS, Linux 5.15.0-56-generic

---

stackblitz env:

[crisbeto]

This is working as expected. We have invisible elements inside the button that extend outside of it in order to increase the touch target for accessibility purposes. You can disable it by setting display: none on .mat-mdc-button-touch-target.

[CroMarmot]

Oh, so that's it, thanks for the reply.

[angular-automatic-lock-bot[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.}