From 40ff3f9a5ef5b472a8b3f65f49647a40f742c895 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 11 Jul 2018 17:19:43 +0200
Subject: [PATCH] build: make body scrollable element in demo (#12093)

Reworks the demo to make the `body` the scrollable element. Currently we have the `mat-sidenav-content` be scrollable which doesn't reflect the setup in most apps and makes it harder to test some cases, because of some things like the overlay backdrop blocking scrolling.
---
 src/demo-app/demo-app/demo-app.html |  2 +-
 src/demo-app/demo-app/demo-app.scss | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
index fb301db67ca..42692ff6f48 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/src/demo-app/demo-app/demo-app.html
@@ -1,4 +1,4 @@
-<mat-sidenav-container fullscreen>
+<mat-sidenav-container class="demo-container">
   <mat-sidenav #start>
     <mat-nav-list>
       <a *ngFor="let navItem of navItems"
diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss
index 6e635dd8b53..b6d88965417 100644
--- a/src/demo-app/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app/demo-app.scss
@@ -1,5 +1,11 @@
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
 body {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
+  margin: 0;
 
   // Helps fonts on OSX looks more consistent with other systems
   // Isn't currently in button styles due to performance concerns
@@ -10,6 +16,7 @@ body {
 
   .mat-sidenav {
     min-width: 15vw;
+    position: fixed;
 
     .mat-button {
       width: 100%;
@@ -48,3 +55,8 @@ body {
   height: 100%;
   box-sizing: border-box;
 }
+
+.demo-container {
+  min-width: 100%;
+  min-height: 100%;
+}