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

1 files changed, 72 insertions, 69 deletions

diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
index 5afb95ac430..4dcd162916b 100644
--- a/app/views/search/_category.html.haml
+++ b/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