Add horizontal scrolling to all sub-navs on mobile viewports

2 files changed, 52 insertions, 48 deletions

diff --git a/app/views/admin/background_jobs/_head.html.haml b/app/views/admin/background_jobs/_head.html.haml
index 89d7a40d6b0..107fc25244a 100644
--- a/app/views/admin/background_jobs/_head.html.haml
+++ b/app/views/admin/background_jobs/_head.html.haml
@@ -1,22 +1,24 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
-    = nav_link(controller: :system_info) do
-      = link_to admin_system_info_path, title: 'System Info' do
-        %span
-          System Info
-    = nav_link(controller: :background_jobs) do
-      = link_to admin_background_jobs_path, title: 'Background Jobs' do
-        %span
-          Background Jobs
-    = nav_link(controller: :logs) do
-      = link_to admin_logs_path, title: 'Logs' do
-        %span
-          Logs
-    = nav_link(controller: :health_check) do
-      = link_to admin_health_check_path, title: 'Health Check' do
-        %span
-          Health Check
-    = nav_link(controller: :requests_profiles) do
-      = link_to admin_requests_profiles_path, title: 'Requests Profiles' do
-        %span
-          Requests Profiles
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
+      = nav_link(controller: :system_info) do
+        = link_to admin_system_info_path, title: 'System Info' do
+          %span
+            System Info
+      = nav_link(controller: :background_jobs) do
+        = link_to admin_background_jobs_path, title: 'Background Jobs' do
+          %span
+            Background Jobs
+      = nav_link(controller: :logs) do
+        = link_to admin_logs_path, title: 'Logs' do
+          %span
+            Logs
+      = nav_link(controller: :health_check) do
+        = link_to admin_health_check_path, title: 'Health Check' do
+          %span
+            Health Check
+      = nav_link(controller: :requests_profiles) do
+        = link_to admin_requests_profiles_path, title: 'Requests Profiles' do
+          %span
+            Requests Profiles
diff --git a/app/views/admin/dashboard/_head.html.haml b/app/views/admin/dashboard/_head.html.haml
index b74da64f82e..c91ab4cb946 100644
--- a/app/views/admin/dashboard/_head.html.haml
+++ b/app/views/admin/dashboard/_head.html.haml
@@ -1,26 +1,28 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
-    = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
-      = link_to admin_root_path, title: 'Overview' do
-        %span
-          Overview
-    = nav_link(controller: [:admin, :projects]) do
-      = link_to admin_namespaces_projects_path, title: 'Projects' do
-        %span
-          Projects
-    = nav_link(controller: :users) do
-      = link_to admin_users_path, title: 'Users' do
-        %span
-          Users
-    = nav_link(controller: :groups) do
-      = link_to admin_groups_path, title: 'Groups' do
-        %span
-          Groups
-    = nav_link path: 'builds#index' do
-      = link_to admin_builds_path, title: 'Builds' do
-        %span
-          Builds
-    = nav_link path: ['runners#index', 'runners#show'] do
-      = link_to admin_runners_path, title: 'Runners' do
-        %span
-          Runners
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
+      = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
+        = link_to admin_root_path, title: 'Overview' do
+          %span
+            Overview
+      = nav_link(controller: [:admin, :projects]) do
+        = link_to admin_namespaces_projects_path, title: 'Projects' do
+          %span
+            Projects
+      = nav_link(controller: :users) do
+        = link_to admin_users_path, title: 'Users' do
+          %span
+            Users
+      = nav_link(controller: :groups) do
+        = link_to admin_groups_path, title: 'Groups' do
+          %span
+            Groups
+      = nav_link path: 'builds#index' do
+        = link_to admin_builds_path, title: 'Builds' do
+          %span
+            Builds
+      = nav_link path: ['runners#index', 'runners#show'] do
+        = link_to admin_runners_path, title: 'Runners' do
+          %span
+            Runners