bug(Material 3 > Button): When button is last child element in mat-dialog-content it causes a vertical scrollbar to appear

[roesselman]

Is this a regression?

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

The previous version in which this bug was not present was

v17 (Material 2)

Description

When button is last child element in mat-dialog-content it causes a vertical scrollbar to appear.

Reproduction

StackBlitz link
Steps to reproduce:

1. Create Angular v18 project + add Angular material v18
2. Create a dialog component
3. In dialog component: Add a mat-button in mat-dialog-content
4. Open dialog

Expected Behavior

There should be no vertical scrollbar in the dialog

Actual Behavior

There is a vertical scroll bar in the dialog

Environment

• Angular: "@angular/core": "18.0.0"
• CDK/Material: "@angular/material": "18.0.0"
• Browser(s): Edge
• Operating System: Windows

Angular CLI: 18.0.0
Node: 22.2.0
Package Manager: npm 10.7.0
OS: win32 x64

Angular: 18.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-luxon-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version

@angular-devkit/architect 0.1800.0
@angular-devkit/build-angular 18.0.0
@angular-devkit/core 18.0.0
@angular-devkit/schematics 18.0.0
@schematics/angular 18.0.0
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6

[andrewseguin]

This is due to the inner touch target element being a larger size than it's container, causing the dialog content to be a height shorter than it should be. A workaround is to add a margin-bottom: 4px to the button. The fix would need some thought since the button is supposed to have a 40px height visually and layout-wise, but for accessibility reasons it needs to be a minimum of 48px.