From c2c0adffc8cd09607be25506430a6b2bfedaedbd 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
---
 src/app/material-docs-app.scss    | 21 +++++----------------
 src/app/shared/navbar/navbar.scss |  7 +++++++
 src/styles/_general.scss          |  4 ++++
 3 files changed, 16 insertions(+), 16 deletions(-)

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..7c74e168a 100644
--- a/src/app/shared/navbar/navbar.scss
+++ b/src/app/shared/navbar/navbar.scss
@@ -69,3 +69,10 @@
     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..1342b4d58 100644
--- a/src/styles/_general.scss
+++ b/src/styles/_general.scss
@@ -1,3 +1,7 @@
+html,
+body {
+  height: 100vh;
+}
 body {
   font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
   margin: 0;