Change to xs breakpoint, layout_nav updates

app/assets/javascripts/layout_nav.js.coffee

 class @LayoutNav
   $ ->
     $('.fade-left').addClass('end-scroll')
-    $('.scrolling-tabs').scroll (event) ->
-      el = $(event.target)
-      currentPosition = $(this).scrollLeft()
-      mobileScreenWidth = 480
+    $('.scrolling-tabs').on 'scroll', (event) ->
+      $this = $(this)
+      $el = $(event.target)
+      currentPosition = $this.scrollLeft()
+      size = bp.getBreakpointSize()
       controlBtnWidth = $('.controls').width()
-      maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
-      maxPosition += controlBtnWidth if $('.nav-control').length and $(window).width() > mobileScreenWidth
+      maxPosition = $this.get(0).scrollWidth - $this.parent().width()
+      maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
 
-      el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
-      el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
+      $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+      $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)

app/assets/stylesheets/framework/nav.scss

@@ -2,7 +2,7 @@
   visibility: visible;
   opacity: 1;
   position: absolute;
-  bottom: 16px;
+  bottom: 12px;
   width: 43px;
   height: 30px;
   transition-duration: .3s;
@@ -240,7 +240,7 @@
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-xs-min) {
+    @media (max-width: $screen-xs-max) {
       display: none;
     }
 
@@ -310,7 +310,6 @@
 
   .nav-control {
     .fade-right {
-      right: 58px;
 
       @media (min-width: $screen-xs-max) {
         right: 67px;