Description
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
14
Description
Since v15, MDC snack bar is used and it provides a breakpoint at 480px which overrides mdc-snackbar__surface's min-width to 100% but it doesn't work correctly for Material Angular snack bars where it seems to take min content width instead of full viewport width.
Also, just a thought: is handsetCssClass still relevant now there is already this MDC breakpoint? (it's seems redundant)
Reproduction
All the behaviors described below are achieved using Chrome's device toolbar with responsive dimensions of 480x400.
Expected Behavior
When looking at the example from MDC Web, the min-width is working as expected (by taking the full width of the viewport):
Just for reference, here's how it was working in v14 (correctly because no MDC breakpoint):
(https://stackblitz.com/edit/wrong-snackbar-action-color-with-mat-app-background-14?file=src%2Fapp%2Fapp.component.ts)
Actual Behavior
Instead of taking the full width of the viewport like in the MDC Web example, in v15, the Angular Material snack bar seems to take min content width:
(https://stackblitz.com/edit/wrong-snackbar-action-color-with-mat-app-background-15?file=src%2Fapp%2Fapp.component.ts)
Environment
- Angular: 15.0.3
- CDK/Material: 15.0.2
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows