Skip to content

Commit b52cd63

Browse files
committed
fix(material/snack-bar): incorrect width at some breakpoints (#26334)
MDC has some built in breakpoints where the snack bar container becomes `min-width: 100%`. They didn't work correctly, because the container wasn't set up to be 100% wide. Fixes #26290. (cherry picked from commit 397bd41)
1 parent 3e50216 commit b52cd63

File tree

1 file changed

+20
-10
lines changed

1 file changed

+20
-10
lines changed

src/material/snack-bar/snack-bar-container.scss

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use 'sass:map';
2-
@use '@angular/cdk';
32
@use '@material/snackbar/snackbar' as mdc-snackbar;
43
@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
54
@use '../core/mdc-helpers/mdc-helpers';
@@ -10,13 +9,28 @@
109
@include mdc-snackbar.static-styles($query: mdc-helpers.$mdc-base-styles-without-animation-query);
1110
}
1211

12+
@mixin _container-min-width {
13+
$min-width: mdc-snackbar-theme.$min-width;
14+
$mobile-breakpoint: mdc-snackbar-theme.$mobile-breakpoint;
15+
16+
// The styles weren't included in `static-styles` so we need to add them ourselves.
17+
@include mdc-snackbar-theme.min-width(
18+
$min-width: $min-width,
19+
$mobile-breakpoint: $mobile-breakpoint,
20+
$query: mdc-helpers.$mdc-base-styles-query
21+
);
22+
23+
// The MDC `min-width` mixin has a similar breakpoint that sets `min-width: 100%` on the surface
24+
// element to make it span the entire viewport, however it ends up collapsing because the
25+
// container is `width: auto`. This query ensures that the surface will span the whole viewport.
26+
@media (max-width: $mobile-breakpoint), (max-width: $min-width) {
27+
width: 100vw;
28+
}
29+
}
30+
1331
.mat-mdc-snack-bar-container {
1432
@include mdc-helpers.disable-mdc-fallback-declarations {
15-
// The styles weren't included in `static-styles` so we need to add them ourselves.
16-
@include mdc-snackbar-theme.min-width(
17-
mdc-snackbar-theme.$min-width,
18-
$query: mdc-helpers.$mdc-base-styles-query
19-
);
33+
@include _container-min-width;
2034
@include mdc-snackbar-theme.max-width(
2135
mdc-snackbar-theme.$max-width,
2236
$query: mdc-helpers.$mdc-base-styles-query
@@ -60,10 +74,6 @@
6074
// of positions, so we'll defer logic there.
6175
position: static;
6276

63-
@include cdk.high-contrast(active, off) {
64-
border: solid 1px;
65-
}
66-
6777
// The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
6878
// the specificity over the button styles that may bleed in from the rest of the app.
6979
.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {

0 commit comments

Comments
 (0)