Fixed inner page tabs not being scrollable

Some inner page tabs where not scrollable like the top nav & this caused
them to break onto new lines mobile.

This pages include:

- dashboard/projects
- project -> merge_requests
- search
- project -> milestones
- project -> pipelines

Closes #18853

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

@@ -17,52 +17,56 @@ export default {
   },
 
   template: `
-    <ul class="nav-links">
-      <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 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>
   `,
 };

app/assets/stylesheets/framework/nav.scss

@@ -476,3 +476,27 @@
     }
   }
 }
+
+.inner-page-scroll-tabs {
+  position: relative;
+
+  .fade-right {
+    @include fade(left, $white-light);
+    right: 0;
+    text-align: right;
+
+    .fa {
+      right: 5px;
+    }
+  }
+
+  .fade-left {
+    @include fade(right, $white-light);
+    left: 0;
+    text-align: left;
+
+    .fa {
+      left: 5px;
+    }
+  }
+}

app/views/dashboard/_projects_head.html.haml

@@ -1,16 +1,19 @@
 = content_for :flash_message do
   = render 'shared/project_limit'
-.top-area
-  %ul.nav-links
-    = 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'

app/views/projects/merge_requests/_show.html.haml

@@ -52,8 +52,10 @@
       = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
 
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
-      .merge-request-tabs-container
-        %ul.merge-request-tabs.nav-links.no-top.no-bottom
+      .merge-request-tabs-container.scrolling-tabs-container.inner-page-scroll-tabs
+        .fade-left= icon('angle-left')
+        .fade-right= icon('angle-right')
+        %ul.merge-request-tabs.nav-links.scrolling-tabs
           %li.notes-tab
             = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
               Discussion

app/views/search/_category.html.haml

@@ -1,71 +1,74 @@
-%ul.nav-links.search-filter
-  - if @project
-    %li{ class: active_when(@scope == 'blobs') }
-      = link_to search_filter_path(scope: 'blobs') do
-        Code
-        %span.badge
-          = @search_results.blobs_count
-    %li{ class: active_when(@scope == 'issues') }
-      = link_to search_filter_path(scope: 'issues') do
-        Issues
-        %span.badge
-          = @search_results.issues_count
-    %li{ class: active_when(@scope == 'merge_requests') }
-      = link_to search_filter_path(scope: 'merge_requests') do
-        Merge requests
-        %span.badge
-          = @search_results.merge_requests_count
-    %li{ class: active_when(@scope == 'milestones') }
-      = link_to search_filter_path(scope: 'milestones') do
-        Milestones
-        %span.badge
-          = @search_results.milestones_count
-    %li{ class: active_when(@scope == 'notes') }
-      = link_to search_filter_path(scope: 'notes') do
-        Comments
-        %span.badge
-          = @search_results.notes_count
-    %li{ class: active_when(@scope == 'wiki_blobs') }
-      = link_to search_filter_path(scope: 'wiki_blobs') do
-        Wiki
-        %span.badge
-          = @search_results.wiki_blobs_count
-    %li{ class: active_when(@scope == 'commits') }
-      = link_to search_filter_path(scope: 'commits') do
-        Commits
-        %span.badge
-          = @search_results.commits_count
+.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.search-filter.scrolling-tabs
+    - if @project
+      %li{ class: active_when(@scope == 'blobs') }
+        = link_to search_filter_path(scope: 'blobs') do
+          Code
+          %span.badge
+            = @search_results.blobs_count
+      %li{ class: active_when(@scope == 'issues') }
+        = link_to search_filter_path(scope: 'issues') do
+          Issues
+          %span.badge
+            = @search_results.issues_count
+      %li{ class: active_when(@scope == 'merge_requests') }
+        = link_to search_filter_path(scope: 'merge_requests') do
+          Merge requests
+          %span.badge
+            = @search_results.merge_requests_count
+      %li{ class: active_when(@scope == 'milestones') }
+        = link_to search_filter_path(scope: 'milestones') do
+          Milestones
+          %span.badge
+            = @search_results.milestones_count
+      %li{ class: active_when(@scope == 'notes') }
+        = link_to search_filter_path(scope: 'notes') do
+          Comments
+          %span.badge
+            = @search_results.notes_count
+      %li{ class: active_when(@scope == 'wiki_blobs') }
+        = link_to search_filter_path(scope: 'wiki_blobs') do
+          Wiki
+          %span.badge
+            = @search_results.wiki_blobs_count
+      %li{ class: active_when(@scope == 'commits') }
+        = link_to search_filter_path(scope: 'commits') do
+          Commits
+          %span.badge
+            = @search_results.commits_count
 
-  - elsif @show_snippets
-    %li{ class: active_when(@scope == 'snippet_blobs') }
-      = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do
-        Snippet Contents
-        %span.badge
-          = @search_results.snippet_blobs_count
-    %li{ class: active_when(@scope == 'snippet_titles') }
-      = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do
-        Titles and Filenames
-        %span.badge
-          = @search_results.snippet_titles_count
+    - elsif @show_snippets
+      %li{ class: active_when(@scope == 'snippet_blobs') }
+        = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do
+          Snippet Contents
+          %span.badge
+            = @search_results.snippet_blobs_count
+      %li{ class: active_when(@scope == 'snippet_titles') }
+        = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do
+          Titles and Filenames
+          %span.badge
+            = @search_results.snippet_titles_count
 
-  - else
-    %li{ class: active_when(@scope == 'projects') }
-      = link_to search_filter_path(scope: 'projects') do
-        Projects
-        %span.badge
-          = @search_results.projects_count
-    %li{ class: active_when(@scope == 'issues') }
-      = link_to search_filter_path(scope: 'issues') do
-        Issues
-        %span.badge
-          = @search_results.issues_count
-    %li{ class: active_when(@scope == 'merge_requests') }
-      = link_to search_filter_path(scope: 'merge_requests') do
-        Merge requests
-        %span.badge
-          = @search_results.merge_requests_count
-    %li{ class: active_when(@scope == 'milestones') }
-      = link_to search_filter_path(scope: 'milestones') do
-        Milestones
-        %span.badge
-          = @search_results.milestones_count
+    - else
+      %li{ class: active_when(@scope == 'projects') }
+        = link_to search_filter_path(scope: 'projects') do
+          Projects
+          %span.badge
+            = @search_results.projects_count
+      %li{ class: active_when(@scope == 'issues') }
+        = link_to search_filter_path(scope: 'issues') do
+          Issues
+          %span.badge
+            = @search_results.issues_count
+      %li{ class: active_when(@scope == 'merge_requests') }
+        = link_to search_filter_path(scope: 'merge_requests') do
+          Merge requests
+          %span.badge
+            = @search_results.merge_requests_count
+      %li{ class: active_when(@scope == 'milestones') }
+        = link_to search_filter_path(scope: 'milestones') do
+          Milestones
+          %span.badge
+            = @search_results.milestones_count

app/views/shared/milestones/_tabs.html.haml

@@ -1,26 +1,29 @@
-%ul.nav-links.no-top.no-bottom
-  - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project)
-    %li.active
-      = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
-        Issues
-        %span.badge= milestone.issues_visible_to_user(current_user).size
+.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.scrolling-tabs
+    - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project)
+      %li.active
+        = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
+          Issues
+          %span.badge= milestone.issues_visible_to_user(current_user).size
+      %li
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
+          Merge Requests
+          %span.badge= milestone.merge_requests.size
+    - else
+      %li.active
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
+          Merge Requests
+          %span.badge= milestone.merge_requests.size
     %li
-      = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
-        Merge Requests
-        %span.badge= milestone.merge_requests.size
-  - else
-    %li.active
-      = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
-        Merge Requests
-        %span.badge= milestone.merge_requests.size
-  %li
-    = link_to '#tab-participants', 'data-toggle' => 'tab' do
-      Participants
-      %span.badge= milestone.participants.count
-  %li
-    = link_to '#tab-labels', 'data-toggle' => 'tab' do
-      Labels
-      %span.badge= milestone.labels.count
+      = link_to '#tab-participants', 'data-toggle' => 'tab' do
+        Participants
+        %span.badge= milestone.participants.count
+    %li
+      = link_to '#tab-labels', 'data-toggle' => 'tab' do
+        Labels
+        %span.badge= milestone.labels.count
 
 - show_project_name = local_assigns.fetch(:show_project_name, false)
 - show_full_project_name = local_assigns.fetch(:show_full_project_name, false)

changelogs/unreleased/scrollable-secondary-tabs.yml

@@ -0,0 +1,4 @@
+---
+title: Fixed tabs not scrolling on mobile
+merge_request:
+author: