Fixed tabs on desktop being all over the place

app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js

@@ -17,56 +17,52 @@ export default {
   },
 
   template: `
-    <div class="scrolling-tabs-container">
-      <div class="fade-left"><i class="fa fa-angle-left"></i></div>
-      <div class="fade-right"><i class="fa fa-angle-right"></i></div>
-      <ul class="nav-links scrolling-tabs">
-        <li
-          class="js-pipelines-tab-all"
-          :class="{ 'active': scope === 'all'}">
-          <a :href="paths.allPath">
-            All
-            <span class="badge js-totalbuilds-count">
-              {{count.all}}
-            </span>
-          </a>
-        </li>
-        <li class="js-pipelines-tab-pending"
-          :class="{ 'active': scope === 'pending'}">
-          <a :href="paths.pendingPath">
-            Pending
-            <span class="badge">
-              {{count.pending}}
-            </span>
-          </a>
-        </li>
-        <li class="js-pipelines-tab-running"
-          :class="{ 'active': scope === 'running'}">
-          <a :href="paths.runningPath">
-            Running
-            <span class="badge">
-              {{count.running}}
-            </span>
-          </a>
-        </li>
-        <li class="js-pipelines-tab-finished"
-          :class="{ 'active': scope === 'finished'}">
-          <a :href="paths.finishedPath">
-            Finished
-            <span class="badge">
-              {{count.finished}}
-            </span>
-          </a>
-        </li>
-        <li class="js-pipelines-tab-branches"
-        :class="{ 'active': scope === 'branches'}">
-          <a :href="paths.branchesPath">Branches</a>
-        </li>
-        <li class="js-pipelines-tab-tags"
-          :class="{ 'active': scope === 'tags'}">
-          <a :href="paths.tagsPath">Tags</a>
-        </li>
-      </ul>
-    </div>
+    <ul class="nav-links scrolling-tabs">
+      <li
+        class="js-pipelines-tab-all"
+        :class="{ 'active': scope === 'all'}">
+        <a :href="paths.allPath">
+          All
+          <span class="badge js-totalbuilds-count">
+            {{count.all}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-pending"
+        :class="{ 'active': scope === 'pending'}">
+        <a :href="paths.pendingPath">
+          Pending
+          <span class="badge">
+            {{count.pending}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-running"
+        :class="{ 'active': scope === 'running'}">
+        <a :href="paths.runningPath">
+          Running
+          <span class="badge">
+            {{count.running}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-finished"
+        :class="{ 'active': scope === 'finished'}">
+        <a :href="paths.finishedPath">
+          Finished
+          <span class="badge">
+            {{count.finished}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-branches"
+      :class="{ 'active': scope === 'branches'}">
+        <a :href="paths.branchesPath">Branches</a>
+      </li>
+      <li class="js-pipelines-tab-tags"
+        :class="{ 'active': scope === 'tags'}">
+        <a :href="paths.tagsPath">Tags</a>
+      </li>
+    </ul>
   `,
 };

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -182,7 +182,7 @@ export default {
     <div :class="cssClass">
 
       <div
-        class="top-area"
+        class="top-area scrolling-tabs-container"
         v-if="!isLoading && !shouldRenderEmptyState">
         <navigation-tabs
           :scope="scope"

app/assets/stylesheets/framework/nav.scss

@@ -480,6 +480,12 @@
 .inner-page-scroll-tabs {
   position: relative;
 
+  .fade-right,
+  .fade-left {
+    top: 17px;
+    bottom: 0;
+  }
+
   .fade-right {
     @include fade(left, $white-light);
     right: 0;

app/views/dashboard/_projects_head.html.haml

 = content_for :flash_message do
   = render 'shared/project_limit'
-.top-area.scrolling-tabs-container
-  .inner-page-scroll-tabs
-    .fade-left= icon('angle-left')
-    .fade-right= icon('angle-right')
-    %ul.nav-links.scrolling-tabs
-      = nav_link(page: [dashboard_projects_path, root_path]) do
-        = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do
-          Your projects
-      = nav_link(page: starred_dashboard_projects_path) do
-        = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do
-          Starred projects
-      = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
-        = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do
-          Explore projects
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.scrolling-tabs
+    = nav_link(page: [dashboard_projects_path, root_path]) do
+      = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do
+        Your projects
+    = nav_link(page: starred_dashboard_projects_path) do
+      = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do
+        Starred projects
+    = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
+      = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do
+        Explore projects
 
   .nav-controls
     = render 'shared/projects/search_form'