From c140b1ac69bb4f3fd172e6012e9224570def5a87 Mon Sep 17 00:00:00 2001
From: Michael Prentice <splaktar@gmail.com>
Date: Tue, 21 Jul 2020 18:21:06 -0400
Subject: [PATCH] fix(material-docs-app): remove absolute positioning of all
 content

- preserve behavior of not having a scrollbar next to the toolbar
- hide theme picker on small devices (iPhone 5) so that navbar doesn't wrap
---
 package.json                      |  2 +-
 src/app/material-docs-app.scss    | 21 +++++----------------
 src/app/shared/navbar/navbar.scss |  8 ++++++++
 src/styles/_general.scss          |  5 +++++
 yarn.lock                         |  2 +-
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 17d3febeb..3f4676d32 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "moment": "^2.24.0",
     "rxjs": "^6.5.4",
     "tslib": "^1.11.1",
-    "zone.js": "0.10.3"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1000.0",
diff --git a/src/app/material-docs-app.scss b/src/app/material-docs-app.scss
index c24be57db..e943f1141 100644
--- a/src/app/material-docs-app.scss
+++ b/src/app/material-docs-app.scss
@@ -1,11 +1,7 @@
 material-docs-app {
   display: flex;
   flex-direction: column;
-  position: absolute;
-  top: 56px;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  height: 100vh;
 }
 
 app-navbar {
@@ -20,21 +16,14 @@ material-docs-app > app-component-sidenav {
   flex: 1;
 }
 
-material-docs-app > app-homepage,
-material-docs-app > app-guides,
-material-docs-app > guide-viewer {
+material-docs-app > router-outlet + * {
+  margin-top: 56px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 @media (max-width: 720px) {
-  material-docs-app {
-    top: 92px;
-  }
-
-  material-docs-app > app-homepage,
-  material-docs-app > app-guides,
-  material-docs-app > guide-viewer {
-    overflow-y: visible;
+  material-docs-app > router-outlet + * {
+    margin-top: 92px;
   }
 }
diff --git a/src/app/shared/navbar/navbar.scss b/src/app/shared/navbar/navbar.scss
index 6df5969a3..6f5f1026b 100644
--- a/src/app/shared/navbar/navbar.scss
+++ b/src/app/shared/navbar/navbar.scss
@@ -69,3 +69,11 @@
     margin: 0;
   }
 }
+
+theme-picker {
+  display: none;
+
+  @media (min-width: 328px) {
+    display: block;
+  }
+}
diff --git a/src/styles/_general.scss b/src/styles/_general.scss
index a7d067c4e..190ac4bdd 100644
--- a/src/styles/_general.scss
+++ b/src/styles/_general.scss
@@ -1,3 +1,8 @@
+html,
+body {
+  height: 100vh;
+}
+
 body {
   font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
   margin: 0;
diff --git a/yarn.lock b/yarn.lock
index 5e4b0b17d..ddc036405 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12121,7 +12121,7 @@ zip-stream@^2.1.2:
     compress-commons "^2.1.1"
     readable-stream "^3.4.0"
 
-zone.js@0.10.3:
+zone.js@~0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.10.3.tgz#3e5e4da03c607c9dcd92e37dd35687a14a140c16"
   integrity sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==