fix: numerous responsive issues on screens from 360px to 960px

src/app/pages/component-category-list/component-category-list.ts

@@ -38,7 +38,9 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.routeParamSubscription.unsubscribe();
+    if (this.routeParamSubscription) {
+      this.routeParamSubscription.unsubscribe();
+    }
   }
 }
 

src/app/pages/component-page-header/component-page-header.scss

@@ -23,6 +23,7 @@ h1 {
   margin: 8px;
   min-width: 64px;
   display: none;
+
   @media (max-width: $small-breakpoint-width) {
     display: flex;
     align-items: center;

src/app/pages/component-sidenav/component-sidenav.html

@@ -5,11 +5,11 @@
               [opened]="(isScreenSmall | async) === false"
               [mode]="(isScreenSmall | async) ? 'over' : 'side'"
               [fixedInViewport]="(isScreenSmall | async)"
-              [fixedTopGap]="92">
+              [fixedTopGap]="(isExtraScreenSmall | async) ? 92 : 56">
     <app-component-nav [params]="params"></app-component-nav>
   </mat-sidenav>
   <div class="docs-component-sidenav-content">
-    <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
+    <component-page-header (toggleSidenav)="toggleSidenav(sidenav)"></component-page-header>
     <div class="docs-component-sidenav-inner-content">
       <main class="docs-component-sidenav-body-content">
         <!-- If on large screen, menu resides to left of content -->

src/app/pages/component-sidenav/component-sidenav.ts

@@ -11,12 +11,12 @@ import {
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
-import {ActivatedRoute, Params, Router, RouterModule, Routes} from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Params, Router, RouterModule, Routes} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {ComponentHeaderModule} from '../component-page-header/component-page-header';
 import {FooterModule} from '../../shared/footer/footer';
 import {combineLatest, Observable, Subject} from 'rxjs';
-import {map, startWith, switchMap, takeUntil} from 'rxjs/operators';
+import {filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {BreakpointObserver} from '@angular/cdk/layout';
@@ -29,17 +29,27 @@ import {
   ComponentApi,
   ComponentExamples,
   ComponentOverview,
-  ComponentViewer, ComponentViewerModule
+  ComponentViewer,
+  ComponentViewerModule
 } from '../component-viewer/component-viewer';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {StackBlitzButtonModule} from '../../shared/stack-blitz';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {ExampleModule} from '@angular/components-examples';
+import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
 import {MatListModule} from '@angular/material/list';
 
-const SMALL_WIDTH_BREAKPOINT = 720;
+// These constants are used by the ComponentSidenav for orchestrating the MatSidenav in a responsive
+// way. This includes hiding the sidenav, defaulting it to open, changing the mode from over to
+// side, determining the size of the top gap, and whether the sidenav is fixed in the viewport.
+// The values were determined through the combination of Material Design breakpoints and careful
+// testing of the application across a range of common device widths (360px+).
+// These breakpoint values need to stay in sync with the related Sass variables in
+// src/styles/_constants.scss.
+const EXTRA_SMALL_WIDTH_BREAKPOINT = 720;
+const SMALL_WIDTH_BREAKPOINT = 959;
 
 @Component({
   selector: 'app-component-sidenav',
@@ -50,21 +60,39 @@ const SMALL_WIDTH_BREAKPOINT = 720;
 export class ComponentSidenav implements OnInit {
   @ViewChild(MatSidenav) sidenav: MatSidenav;
   params: Observable<Params>;
+  isExtraScreenSmall: Observable<boolean>;
   isScreenSmall: Observable<boolean>;
 
   constructor(public docItems: DocumentationItems,
               private _route: ActivatedRoute,
+              private _router: Router,
               zone: NgZone,
               breakpoints: BreakpointObserver) {
+    this.isExtraScreenSmall =
+        breakpoints.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
+            .pipe(map(breakpoint => breakpoint.matches));
     this.isScreenSmall = breakpoints.observe(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)
-        .pipe(map(breakpoint => breakpoint.matches));
+    .pipe(map(breakpoint => breakpoint.matches));
   }
 
   ngOnInit() {
     // Combine params from all of the path into a single object.
     this.params = combineLatest(
-      this._route.pathFromRoot.map(route => route.params),
-      Object.assign);
+        this._route.pathFromRoot.map(route => route.params), Object.assign);
+
+    this._router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      map((event) => this.isScreenSmall)
+    ).subscribe((shouldCloseSideNav) => {
+        if (shouldCloseSideNav && this.sidenav) {
+          this.sidenav.close();
+        }
+      }
+    );
+  }
+
+  toggleSidenav(sidenav: MatSidenav): Promise<MatDrawerToggleResult> {
+    return sidenav.toggle();
   }
 }
 
@@ -85,8 +113,7 @@ export class ComponentNav implements OnInit, OnDestroy {
   currentItemId: string;
   private _onDestroy = new Subject<void>();
 
-  constructor(public docItems: DocumentationItems,
-              private _router: Router) { }
+  constructor(public docItems: DocumentationItems, private _router: Router) {}
 
   ngOnInit() {
     this._router.events.pipe(

src/app/pages/component-viewer/component-api.html

@@ -3,19 +3,17 @@
     API for {{docItem?.id}}
   </span>
 
-  <span>
-    <doc-viewer
-      documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
-      class="docs-component-view-text-content docs-component-api"
-      (contentRendered)="updateTableOfContents(docItem!.name, $event)">
-    </doc-viewer>
+  <doc-viewer
+    documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
+    class="docs-component-view-text-content docs-component-api"
+    (contentRendered)="updateTableOfContents(docItem!.name, $event)">
+  </doc-viewer>
 
-    <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
-      documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
-      class="docs-component-view-text-content docs-component-api"
-      (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
-    </doc-viewer>
-  </span>
+  <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
+    documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
+    class="docs-component-view-text-content docs-component-api"
+    (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
+  </doc-viewer>
 
   <table-of-contents #toc
       *ngIf="showToc | async"

src/app/pages/component-viewer/component-api.scss

@@ -11,6 +11,13 @@
   }
 }
 
+.docs-api-type-alias-name,
+.docs-api-class-name {
+  @media (max-width: 399px) {
+    word-break: break-word;
+  }
+}
+
 .docs-api-h3 {
   font-weight: 300;
   font-size: 24px;

src/app/pages/guide-list/guide-list.scss

@@ -10,7 +10,7 @@
   flex-grow: 1;
   margin: $content-padding-side;
 
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     margin: 0;
   }
 }

src/app/pages/guide-viewer/guide-viewer.scss

@@ -30,7 +30,7 @@ $guide-content-margin-side-xs: 15px;
   max-width: 940px;
   margin: 0 auto;
 
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     flex-direction: column;
   }
 }
@@ -39,7 +39,7 @@ $guide-content-margin-side-xs: 15px;
   flex-grow: 1;
   width: 80%;
 
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     width: 100%;
   }
 }
@@ -50,7 +50,7 @@ table-of-contents {
 
   // Reposition on top of content on small screens and remove
   // sticky positioning
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     order: -1;
     position: inherit;
     width: auto;

src/app/shared/footer/footer.html

@@ -18,7 +18,7 @@
 
     <div class="docs-footer-copyright">
       <div>
-        <span>Powered by Google ©2010-2019.</span>
+        <span>Powered by Google ©2010-2020.</span>
         <a href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a>
         <span>Documentation licensed under CC BY 4.0.</span>
       </div>

src/styles/_api.scss

@@ -1,5 +1,9 @@
 // Styles for API docs generated via dgeni from material2 source JsDocs.
 
+.docs-api {
+  max-width: 100%;
+}
+
 // Top header, e.g., "API documentation for dialog".
 .docs-api-h2 {
   font-size: 30px;
@@ -62,6 +66,10 @@
   font-size: 12px;
 }
 
+.docs-api-deprecated-marker {
+  margin-right: 8px;
+}
+
 .docs-api-module-import,
 .docs-api-class-selector-name,
 .docs-api-class-export-name {

src/styles/_constants.scss

@@ -1,6 +1,14 @@
 @import '../../node_modules/@angular/material/theming';
 
-$small-breakpoint-width: 720px;
+// The values were determined through the combination of Material Design breakpoints and careful
+// testing of the application across a range of common device widths (360px+).
+// These breakpoint values need to stay in sync with the related constants in
+// src/app/pages/component-sidenav/component-sidenav.ts.
+// The extra small breakpoint is used for styling the guides and certain aspects of the tables.
+$extra-small-breakpoint-width: 720px;
+// The small breakpoint is used for the component category and component list pages, the component
+// pages, the component sidenav, and certain aspects of the tables.
+$small-breakpoint-width: 959px;
 
 /* For desktop, the content should be aligned with the page title. */
 $content-padding-side: 70px;

src/styles/_tables.scss

@@ -22,6 +22,16 @@
 .docs-markdown-td {
   font-weight: 400;
   padding: 8px 16px;
+
+  @media (max-width: $extra-small-breakpoint-width) {
+    &.docs-api-properties-name-cell,
+    &.docs-api-method-parameter-cell,
+    &.docs-api-method-returns-type-cell,
+    &.docs-api-method-description-cell {
+      min-width: 80px;
+      word-break: break-word;
+    }
+  }
 }