From 22c45219a21a77bbb1f775dc09fb64e516468a2d Mon Sep 17 00:00:00 2001
From: Justin DuJardin <justin@dujardinconsulting.com>
Date: Fri, 1 Jan 2016 12:16:43 -0800
Subject: [PATCH] fix(examples): remove horizontal scroll on small phone
 screens

 - and some other visual jank associated with layout changes
---
 examples/app.html     |  4 ++--
 examples/app.scss     |  8 ++++++--
 examples/example.scss | 14 ++++++++------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/examples/app.html b/examples/app.html
index d5be2a21..86261698 100644
--- a/examples/app.html
+++ b/examples/app.html
@@ -44,7 +44,7 @@
        layout="row" layout-align="start center"
        [routerLink]="navigation.prevLink.routeLink">
       <i md-icon>arrow_back</i>
-      <span layout="column" hide-sm>
+      <span layout="column" show-gt-sm hide>
         <span class="label">Previous</span>
         <span class="name md-title">{{navigation.prevLink.brief}}</span>
       </span>
@@ -55,7 +55,7 @@
        [routerLink]="navigation.nextLink.routeLink">
       <span layout="column">
         <span class="label">Next</span>
-        <span class="name md-title">{{navigation.nextLink.brief}}</span>
+        <div class="name md-title">{{navigation.nextLink.brief}}</div>
       </span>
       <i md-icon>arrow_forward</i>
     </a>
diff --git a/examples/app.scss b/examples/app.scss
index 04feadb7..7e2ed7e8 100644
--- a/examples/app.scss
+++ b/examples/app.scss
@@ -38,6 +38,7 @@ demos-app {
       }
       @media screen and (max-width: $layout-breakpoint-sm) {
         width: $app-content-sm;
+        margin: 0;
       }
 
       a.previous, a.next {
@@ -56,7 +57,11 @@ demos-app {
           white-space: nowrap;
         }
         i {
+          height:47px;
+          height: 47px;
           padding-top: 24px;
+          margin: 0 10px;
+          vertical-align:bottom;
         }
       }
       .previous {
@@ -118,14 +123,13 @@ demos-app {
       @include md-tall-toolbar();
       h1 {
         font-size: $title-font-size-base;
-        width: $app-content-sm;
+        width: $app-content-sm - 80px;
         margin-left: 0;
       }
     }
   }
 
   md-content {
-    max-width: 800px;
     > section {
       > h1 {
         margin-top: rem(6);
diff --git a/examples/example.scss b/examples/example.scss
index 5cc1e800..ae18cd4a 100644
--- a/examples/example.scss
+++ b/examples/example.scss
@@ -6,9 +6,9 @@
 .demo-container {
   .demo-toolbar {
     button[md-button] {
-      color: rgba(255,255,255,0.6);
+      color: rgba(255, 255, 255, 0.6);
       &.active {
-        color: rgba(255,255,255,0.9);
+        color: rgba(255, 255, 255, 0.9);
       }
     }
 
@@ -17,10 +17,13 @@
 
 .layout-content,
 .doc-content {
-  max-width: 864px;
   min-width: 300px;
   margin: 16px;
   box-sizing: border-box;
+  @media screen and (max-width: $layout-breakpoint-sm) {
+    margin: 0;
+  }
+
 }
 
 docs-demo {
@@ -46,7 +49,7 @@ docs-demo {
   -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   height: 448px;
-  max-height:0;
+  max-height: 0;
   background: #fff;
   overflow: hidden;
   &.shown {
@@ -55,7 +58,7 @@ docs-demo {
 }
 
 .demo-source-tabs md-tabs-wrapper {
-  background-color: md-color($md-primary,400) !important;
+  background-color: md-color($md-primary, 400) !important;
 }
 
 md-tabs.demo-source-tabs [md-tab],
@@ -63,7 +66,6 @@ md-tabs.demo-source-tabs .md-header {
   background-color: #444444 !important;
 }
 
-
 .demo-source-tabs.ng-hide {
   min-height: 0;
   height: 0;