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
angular · Jan 30, 2021 · c2c0adf · c2c0adf
1 parent 4c71715
commit c2c0adf
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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;