Fixed tabs on desktop being all over the place

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

@@ -17,9 +17,6 @@ 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"
@@ -67,6 +64,5 @@ export default {
         <a :href="paths.tagsPath">Tags</a>
       </li>
     </ul>
-    </div>
   `,
 };

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
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
   %ul.nav-links.scrolling-tabs