Scrolls active tab into middle of nav on mobile

CHANGELOG

@@ -69,6 +69,7 @@ v 8.12.0 (unreleased)
   - Show queued time when showing a pipeline !6084
   - Remove unused mixins (ClemMakesApps)
   - Add search to all issue board lists
+  - Scroll active tab into view on mobile
   - Fix groups sort dropdown alignment (ClemMakesApps)
   - Add horizontal scrolling to all sub-navs on mobile viewports (ClemMakesApps)
   - Use JavaScript tooltips for mentions !5301 (winniehell)

app/assets/javascripts/layout_nav.js

@@ -10,11 +10,13 @@
   };
 
   $(function() {
-    hideEndFade($('.scrolling-tabs'));
+    var $scrollingTabs = $('.scrolling-tabs');
+
+    hideEndFade($scrollingTabs);
     $(window).off('resize.nav').on('resize.nav', function() {
-      return hideEndFade($('.scrolling-tabs'));
+      return hideEndFade($scrollingTabs);
     });
-    return $('.scrolling-tabs').on('scroll', function(event) {
+    $scrollingTabs.off('scroll').on('scroll', function(event) {
       var $this, currentPosition, maxPosition;
       $this = $(this);
       currentPosition = $this.scrollLeft();
@@ -22,6 +24,20 @@
       $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
       return $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
     });
+
+    $scrollingTabs.each(function () {
+      var $this = $(this),
+          scrollingTabWidth = $this.width(),
+          $active = $this.find('.active'),
+          activeWidth = $active.width(),
+          offset = $active.offset().left + activeWidth;
+
+      if (offset > scrollingTabWidth - 30) {
+        var scrollLeft = scrollingTabWidth / 2;
+        scrollLeft = (offset - scrollLeft) - (activeWidth / 2);
+        $this.scrollLeft(scrollLeft);
+      }
+    });
   });
 
 }).call(this);