Make layout work for smaller resolutions

assets/scripts/app/templates/layouts/sidebar.hbs

@@ -1,6 +1,8 @@
-<a id="github" href="https://github.com/travis-ci" title="Fork me on GitHub">
+<div id="github-wrapper">
-  {{t layouts.application.fork_me}}
+  <a id="github" href="https://github.com/travis-ci" title="Fork me on GitHub">
-</a>
+    {{t layouts.application.fork_me}}
+  </a>
+</div>
 
 <div id="slider" {{action toggle target="Travis.app.slider"}}>
   <div class='icon'></div>&nbsp;

assets/styles/app/github.sass

@@ -1,9 +1,20 @@
 @import "_mixins/all"
 
+#github-wrapper
+  position: absolute
+  z-index: 1001
+  top: -40px
+  right: 0px
+  width: 135px
+  height: 135px
+  overflow: hidden
+  pointer-events: none
+
 #github
   display: block
   position: absolute
-  top: 0
+  z-index: 1001
+  top: 40px
   right: -70px
   width: 250px
   padding: 3px 0
@@ -20,6 +31,8 @@
   letter-spacing: -1px
   text-shadow: 0 0 10px #522600
 
+  pointer-events: auto
+
   @include rotate(45deg)
   @include box-shadow(rgba(black, 0.5) 1px 1px 10px, rgba(black, 0.07) 0 0 3px 1px inset)
 

assets/styles/layout.sass

@@ -14,12 +14,16 @@ html, body
   width: 100%
   min-height: 100%
 
+.application > div
+  overflow-x: auto
+
 #top
   position: absolute
   top: 0
   left: 0
   width: 100%
   height: 40px
+  z-index: 1000
 
 #page
   position: relative

public/styles/app.css

@@ -1420,10 +1420,23 @@ li {
 }
 
 /* line 3, /Users/drogus/code/travis/travis-ember/assets/styles/app/github.sass */
+#github-wrapper {
+  position: absolute;
+  z-index: 1001;
+  top: -40px;
+  right: 0px;
+  width: 135px;
+  height: 135px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* line 13, /Users/drogus/code/travis/travis-ember/assets/styles/app/github.sass */
 #github {
   display: block;
   position: absolute;
-  top: 0;
+  z-index: 1001;
+  top: 40px;
   right: -70px;
   width: 250px;
   padding: 3px 0;
@@ -1438,6 +1451,7 @@ li {
   line-height: 19px;
   letter-spacing: -1px;
   text-shadow: 0 0 10px #522600;
+  pointer-events: auto;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
@@ -2537,15 +2551,21 @@ html, body {
 }
 
 /* line 17, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+.application > div {
+  overflow-x: auto;
+}
+
+/* line 20, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
 #top {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 40px;
+  z-index: 1000;
 }
 
-/* line 24, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+/* line 28, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
 #page {
   position: relative;
   display: -webkit-box;
@@ -2565,7 +2585,7 @@ html, body {
   margin-top: 40px;
 }
 
-/* line 33, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+/* line 37, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
 #left, #right {
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
@@ -2575,7 +2595,7 @@ html, body {
   min-height: 100%;
 }
 
-/* line 38, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+/* line 42, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
 #left {
   min-width: 250px;
   max-width: 380px;
@@ -2588,7 +2608,7 @@ html, body {
   box-shadow: transparent 0 0 0 0, #cccccc 0 1px 8px 0, transparent 0 0 0 0, transparent 0 0 0 0;
 }
 
-/* line 47, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+/* line 51, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
 #main {
   -webkit-box-flex: 4;
   -moz-box-flex: 4;
@@ -2600,7 +2620,7 @@ html, body {
   padding: 20px 40px 80px 30px;
 }
 
-/* line 54, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+/* line 58, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
 #right {
   width: 205px;
   padding: 11px 20px 80px 20px;
@@ -2609,7 +2629,7 @@ html, body {
 }
 
 @media screen and (max-width: 1400px) {
-  /* line 61, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+  /* line 65, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
   #left .duration_label {
     display: inline-block;
     width: 11px;
@@ -2621,7 +2641,7 @@ html, body {
   }
 }
 @media screen and (max-width: 1310px) {
-  /* line 71, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
+  /* line 75, /Users/drogus/code/travis/travis-ember/assets/styles/layout.sass */
   #left .finished_at_label {
     display: none;
   }