Set snack bar to be responsive.

Author: josephperrott

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

@@ -8,7 +8,7 @@ $mat-snack-bar-spacing-margin: 24px !default;
 
 .mat-snack-bar-container {
   border-radius: 2px;
-  box-sizing: content-box;
+  box-sizing: border-box;
   display: block;
   margin: $mat-snack-bar-spacing-margin;
   max-width: $mat-snack-bar-max-width;
@@ -17,7 +17,7 @@ $mat-snack-bar-spacing-margin: 24px !default;
   // Initial transformation is applied to start snack bar out of view, below its target position.
   transform: translateY(100%);
 
-  /** 
+  /**
    * Removes margin of snack bars which are center positioned horizontally.  This
    * is done to align snack bars to the edge of the view vertically to match spec.
    */
@@ -33,6 +33,12 @@ $mat-snack-bar-spacing-margin: 24px !default;
     transform: translateY(-100%);
   }
 
+  &.mobile {
+    margin: 0;
+    max-width: inherit;
+    width: 100vw;
+  }
+
   @include cdk-high-contrast {
     border: solid 1px;
   }

src/lib/snack-bar/snack-bar-container.ts

@@ -33,6 +33,7 @@ import {
   PortalHostDirective,
 } from '@angular/cdk/portal';
 import {first} from '@angular/cdk/rxjs';
+import {BreakpointObserver, BreakpointState, Breakpoints} from '@angular/cdk/layout';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {MatSnackBarConfig} from './snack-bar-config';
@@ -58,6 +59,7 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
   host: {
     'role': 'alert',
     'class': 'mat-snack-bar-container',
+    '[class.mobile]': '_isHandset',
     '[@state]': '_animationState',
     '(@state.done)': 'onAnimationEnd($event)'
   },
@@ -90,6 +92,9 @@ export class MatSnackBarContainer extends BasePortalHost implements OnDestroy {
   /** Subject for notifying that the snack bar has finished entering the view. */
   _onEnter: Subject<any> = new Subject();
 
+  /** Whether the snackbar is currently displaying on a mobile screen.. */
+  _isHandset: boolean;
+
   /** The state of the snack bar animations. */
   _animationState = 'void';
 
@@ -100,8 +105,12 @@ export class MatSnackBarContainer extends BasePortalHost implements OnDestroy {
     private _ngZone: NgZone,
     private _renderer: Renderer2,
     private _elementRef: ElementRef,
-    private _changeDetectorRef: ChangeDetectorRef) {
+    private _changeDetectorRef: ChangeDetectorRef,
+    breakpointObserver: BreakpointObserver) {
     super();
+    // Listen for the screen matcheing the `Handset` breakpoint to adjust snackbar styling.
+    breakpointObserver.observe(Breakpoints.Handset).subscribe(
+      breakpointState => this._isHandset = breakpointState.matches);
   }
 
   /** Attach a component portal as content to this snack bar container. */

src/lib/snack-bar/snack-bar-module.ts

@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {LIVE_ANNOUNCER_PROVIDER} from '@angular/cdk/a11y';
+import {LayoutModule} from '@angular/cdk/layout';
 import {MatCommonModule} from '@angular/material/core';
 import {MatSnackBar} from './snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
@@ -23,6 +24,7 @@ import {SimpleSnackBar} from './simple-snack-bar';
     PortalModule,
     CommonModule,
     MatCommonModule,
+    LayoutModule,
   ],
   exports: [MatSnackBarContainer, MatCommonModule],
   declarations: [MatSnackBarContainer, SimpleSnackBar],