fix build tabs responsive

app/styles/app/_mixins/vars.sass

@@ -1,5 +1,6 @@
 
 $blue-grey: #404650
+$blue-grey-light: #d8e2e6
 $light-gray: #e9e9e7
 
 $logo-red: #dc4136
@@ -42,3 +43,9 @@ $error-copy-color: $dashboard-text-color
 $error-bg-gradient: rgba(204,235,247,1)
 // maintenance
 $maintenance-grass: #8cad7d
+
+
+// tabs
+$tab-nav-inactive-bg: #f8f8f8
+$tab-nav-inactive-bg-hover: $white
+$tab-active-bg: $blue-grey-light

app/styles/app/components/travis-switch.sass

@@ -35,7 +35,7 @@ p.settings-row
     top: 2px
     left: 2px
     width: 3.5em
-    height: 1.8em
+    height: 1.9em
     background: #e9e9e7
     border: 1px solid #d7d4d4
     border-radius: 2px

app/styles/app/tabs.sass

@@ -1,10 +1,15 @@
+/*
+ * It's a nightmare to overwrite this
+ * @todo refactor and get rid of all IDs
+ */
+
 
 .tabs
   @include resetul
   li
     height: 28px
     vertical-align: top
-    background-color: #f8f8f8
+    background-color: $tab-nav-inactive-bg
     border-radius: 4px 4px 0px 0px
     padding: 0 12px 0 12px
     margin-right: 10px
@@ -12,10 +17,11 @@
     cursor: pointer
   @media #{$medium-up}
     height: 29px
+    display: inline-block
     li
       display: inline-block
       &:hover
-        background-color: $color-bg-tab-hover
+        background-color: $tab-nav-inactive-bg-hover
 
   .active
     background-color: $color-bg-tab-active
@@ -77,26 +83,26 @@
       background-color: #f5f5f6
       margin-right: 0
       overflow: hidden
-
       &:hover
         background-color: #e1e8eb
-
     a
       text-decoration: none
 
     .active
-      background-color: #d8e2e6
+      display: block
-      border-bottom-color: #d8e2e6
+      background-color: $tab-active-bg
-
+      border-bottom-color: $tab-active-bg
       &:hover
-        background-color: #d8e2e6
+        background-color: $tab-active-bg
-
       a
         color: #6c878e
+      @media #{$medium-up}
+        display: inline-block
 
   .tab
     margin-top: 15px
     ul.navigation
+      @include resetul
       height: 40px
       line-height: 40px
       border-bottom: 1px solid #EAEAEA
@@ -117,6 +123,7 @@
     a
       display: inline
 
+.tabs--main
   #tab_build,
   #tab_job,
   #tab_request,

app/templates/repo.hbs

@@ -20,7 +20,7 @@
       {{view 'repo-actions'}}
       {{view 'repo-show-tabs'}}
 
-      <div class="tab">
+      <div class="tab tab--main">
         {{outlet}}
       </div>
     {{else}}

app/templates/repos/show/tabs.hbs

@@ -1,4 +1,4 @@
-<ul class="tabs">
+<ul class="tabs tabs--main">
   <li id="tab_current" {{bind-attr class="view.classCurrent"}}>
     <h5>
       {{#if repo.slug}}

app/views/repo-show-tabs.coffee

@@ -37,23 +37,23 @@ View = Ember.View.extend
 
   # TODO: refactor tabs, most of the things here are not really DRY
   classJob: (->
-    'active display-inline' if @get('tab') == 'job'
+    'active' if @get('tab') == 'job'
   ).property('tab')
 
   classRequests: (->
-    'active display-inline' if @get('tab') == 'requests'
+    'active' if @get('tab') == 'requests'
   ).property('tab')
 
   classCaches: (->
-    'active display-inline' if @get('tab') == 'caches'
+    'active' if @get('tab') == 'caches'
   ).property('tab')
 
   classSettings: (->
-    'active display-inline' if @get('tab') == 'settings'
+    'active' if @get('tab') == 'settings'
   ).property('tab')
 
   classRequest: (->
-    'active display-inline' if @get('tab') == 'request'
+    'active' if @get('tab') == 'request'
   ).property('tab')
 
 `export default View`