fix(snack-bar): don't stretch to fullscreen in landscape orientation (#…

…16940)

Currently the breakpoint that determines whether the snack bar should take up the full screen width also includes screens up to 960px in landscape orientation, which ends up looking weird for the short messages that usually got into tooltips.

These changes switch the breakpoint to only be mobile devices in portrait mode.

Fixes #16911.

src/material/snack-bar/snack-bar.ts

@@ -22,7 +22,7 @@ import {
   TemplateRef,
   OnDestroy,
 } from '@angular/core';
-import {take, takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators';
 import {SimpleSnackBar} from './simple-snack-bar';
 import {MAT_SNACK_BAR_DATA, MatSnackBarConfig} from './snack-bar-config';
 import {MatSnackBarContainer} from './snack-bar-container';
@@ -185,14 +185,12 @@ export class MatSnackBar implements OnDestroy {
     // Subscribe to the breakpoint observer and attach the mat-snack-bar-handset class as
     // appropriate. This class is applied to the overlay element because the overlay must expand to
     // fill the width of the screen for full width snackbars.
-    this._breakpointObserver.observe(Breakpoints.Handset).pipe(
-      takeUntil(overlayRef.detachments().pipe(take(1)))
+    this._breakpointObserver.observe(Breakpoints.HandsetPortrait).pipe(
+      takeUntil(overlayRef.detachments())
     ).subscribe(state => {
-      if (state.matches) {
-        overlayRef.overlayElement.classList.add('mat-snack-bar-handset');
-      } else {
-        overlayRef.overlayElement.classList.remove('mat-snack-bar-handset');
-      }
+      const classList = overlayRef.overlayElement.classList;
+      const className = 'mat-snack-bar-handset';
+      state.matches ? classList.add(className) : classList.remove(className);
     });
 
     this._animateSnackBar(snackBarRef, config);