Skip to content

Commit

Permalink
fix(material/snack-bar): incorrect width at some breakpoints (#26334)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
crisbeto committed Jan 5, 2023
1 parent 3e50216 commit b52cd63
Showing 1 changed file with 20 additions and 10 deletions.
30 changes: 20 additions & 10 deletions src/material/snack-bar/snack-bar-container.scss
@@ -1,5 +1,4 @@
@use 'sass:map';
@use '@angular/cdk';
@use '@material/snackbar/snackbar' as mdc-snackbar;
@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
@use '../core/mdc-helpers/mdc-helpers';
Expand All @@ -10,13 +9,28 @@
@include mdc-snackbar.static-styles($query: mdc-helpers.$mdc-base-styles-without-animation-query);
}

@mixin _container-min-width {
$min-width: mdc-snackbar-theme.$min-width;
$mobile-breakpoint: mdc-snackbar-theme.$mobile-breakpoint;

// The styles weren't included in `static-styles` so we need to add them ourselves.
@include mdc-snackbar-theme.min-width(
$min-width: $min-width,
$mobile-breakpoint: $mobile-breakpoint,
$query: mdc-helpers.$mdc-base-styles-query
);

// The MDC `min-width` mixin has a similar breakpoint that sets `min-width: 100%` on the surface
// element to make it span the entire viewport, however it ends up collapsing because the
// container is `width: auto`. This query ensures that the surface will span the whole viewport.
@media (max-width: $mobile-breakpoint), (max-width: $min-width) {
width: 100vw;
}
}

.mat-mdc-snack-bar-container {
@include mdc-helpers.disable-mdc-fallback-declarations {
// The styles weren't included in `static-styles` so we need to add them ourselves.
@include mdc-snackbar-theme.min-width(
mdc-snackbar-theme.$min-width,
$query: mdc-helpers.$mdc-base-styles-query
);
@include _container-min-width;
@include mdc-snackbar-theme.max-width(
mdc-snackbar-theme.$max-width,
$query: mdc-helpers.$mdc-base-styles-query
Expand Down Expand Up @@ -60,10 +74,6 @@
// of positions, so we'll defer logic there.
position: static;

@include cdk.high-contrast(active, off) {
border: solid 1px;
}

// The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
// the specificity over the button styles that may bleed in from the rest of the app.
.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
Expand Down

0 comments on commit b52cd63

Please sign in to comment.