Merge branch '18438-ios-scrolling' into 'master'

Resolve "Scrolling horz on iOS for the secondary nav is broken"

## What does this MR do?
Moves absolutely positioned `div`s outside of the scrolling container because mobile safari causes those elements to jump around on scroll.

## Are there points in the code the reviewer needs to double check?
Check on a real iPhone (was only able to check in iOS simulator)

## Why was this MR needed?
Mobile Safari.

## What are the relevant issue numbers?
Closes #18438

## Screenshots (if relevant)
![mobile-safari-fix](/uploads/b38bba735530eb11507fe03036292dd8/mobile-safari-fix.gif)

See merge request !4869

5 files changed, 67 insertions, 68 deletions

diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index 66e5ec1ad1a..0f264cd2e06 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -1,9 +1,10 @@
-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
   = render 'layouts/nav/admin_settings'
-
+  .fade-left
+    = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
   %ul.nav-links.scrolling-tabs
-    %li.fade-left
-      = icon('arrow-left')
     = nav_link(controller: %w(dashboard admin projects users groups builds runners), html_options: {class: 'home'}) do
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
         %span
@@ -37,5 +38,3 @@
         = link_to admin_spam_logs_path, title: "Spam Logs" do
           %span
             Spam Logs
-    %li.fade-right
-      = icon('arrow-right')
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index f7aa9fab7cf..5d657a9ac84 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -1,9 +1,10 @@
-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
   = render 'layouts/nav/group_settings'
-
+  .fade-left
+    = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
   %ul.nav-links.scrolling-tabs
-    %li.fade-left
-      = icon('arrow-left')
     = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
       = link_to group_path(@group), title: 'Home' do
         %span
@@ -32,5 +33,3 @@
       = link_to group_group_members_path(@group), title: 'Members' do
         %span
           Members
-    %li.fade-right
-      = icon('arrow-right')
diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml
index 44ea939b7e4..f37f9b0f5a3 100644
--- a/app/views/layouts/nav/_profile.html.haml
+++ b/app/views/layouts/nav/_profile.html.haml
@@ -1,48 +1,49 @@
-%ul.nav-links.scrolling-tabs
-  %li.fade-left
+.scrolling-tabs-container
+  .fade-left
     = icon('arrow-left')
-  = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
-    = link_to profile_path, title: 'Profile Settings' do
-      %span
-        Profile
-  = nav_link(controller: [:accounts, :two_factor_auths]) do
-    = link_to profile_account_path, title: 'Account' do
-      %span
-        Account
-  - if current_application_settings.user_oauth_applications?
-    = nav_link(controller: 'oauth/applications') do
-      = link_to applications_profile_path, title: 'Applications' do
-        %span
-          Applications
-  = nav_link(controller: :personal_access_tokens) do
-    = link_to profile_personal_access_tokens_path, title: 'Personal Access Tokens' do
-      %span
-        Personal Access Tokens
-  = nav_link(controller: :emails) do
-    = link_to profile_emails_path, title: 'Emails' do
-      %span
-        Emails
-  - unless current_user.ldap_user?
-    = nav_link(controller: :passwords) do
-      = link_to edit_profile_password_path, title: 'Password' do
-        %span
-          Password
-  = nav_link(controller: :notifications) do
-    = link_to profile_notifications_path, title: 'Notifications' do
-      %span
-        Notifications
-
-  = nav_link(controller: :keys) do
-    = link_to profile_keys_path, title: 'SSH Keys' do
-      %span
-        SSH Keys
-  = nav_link(controller: :preferences) do
-    = link_to profile_preferences_path, title: 'Preferences' do
-      %span
-        Preferences
-  = nav_link(path: 'profiles#audit_log') do
-    = link_to audit_log_profile_path, title: 'Audit Log' do
-      %span
-        Audit Log
-  %li.fade-right
+  .fade-right
     = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
+    = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
+      = link_to profile_path, title: 'Profile Settings' do
+        %span
+          Profile
+    = nav_link(controller: [:accounts, :two_factor_auths]) do
+      = link_to profile_account_path, title: 'Account' do
+        %span
+          Account
+    - if current_application_settings.user_oauth_applications?
+      = nav_link(controller: 'oauth/applications') do
+        = link_to applications_profile_path, title: 'Applications' do
+          %span
+            Applications
+    = nav_link(controller: :personal_access_tokens) do
+      = link_to profile_personal_access_tokens_path, title: 'Personal Access Tokens' do
+        %span
+          Personal Access Tokens
+    = nav_link(controller: :emails) do
+      = link_to profile_emails_path, title: 'Emails' do
+        %span
+          Emails
+    - unless current_user.ldap_user?
+      = nav_link(controller: :passwords) do
+        = link_to edit_profile_password_path, title: 'Password' do
+          %span
+            Password
+    = nav_link(controller: :notifications) do
+      = link_to profile_notifications_path, title: 'Notifications' do
+        %span
+          Notifications
+
+    = nav_link(controller: :keys) do
+      = link_to profile_keys_path, title: 'SSH Keys' do
+        %span
+          SSH Keys
+    = nav_link(controller: :preferences) do
+      = link_to profile_preferences_path, title: 'Preferences' do
+        %span
+          Preferences
+    = nav_link(path: 'profiles#audit_log') do
+      = link_to audit_log_profile_path, title: 'Audit Log' do
+        %span
+          Audit Log
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 27e840df503..a4bb56aa56f 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -24,10 +24,12 @@
                 data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do
                 Leave Project
 
-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
+  .fade-left
+    = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
   %ul.nav-links.scrolling-tabs
-    %li.fade-left
-      = icon('arrow-left')
     = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
       = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
         %span
@@ -111,5 +113,3 @@
       %li.hidden
         = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
           Commits
-    %li.fade-right
-      = icon('arrow-right')
diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml
index 54dab4bff07..b11b6c24ccd 100644
--- a/app/views/projects/commits/_head.html.haml
+++ b/app/views/projects/commits/_head.html.haml
@@ -1,8 +1,10 @@
-.scrolling-tabs-container
+.scrolling-tabs-container.sub-nav-scroll
+  .fade-left
+    = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
   .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
-      %li.fade-left
-        = icon('arrow-left')
       = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
         = link_to project_files_path(@project) do
           Files
@@ -26,5 +28,3 @@
       = nav_link(controller: [:tags, :releases]) do
         = link_to namespace_project_tags_path(@project.namespace, @project) do
           Tags
-      %li.fade-right
-        = icon('arrow-right')