Open roesselman opened 1 month ago
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.
Is this a regression?
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:
Expected Behavior
There should be no vertical scrollbar in the dialog
Actual Behavior
There is a vertical scroll bar in the dialog
Environment
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