Merge branch 'scrollable-secondary-tabs' into 'master'

Fixed inner page tabs not being scrollable

Closes #18853

See merge request !10204

1 files changed, 19 insertions, 16 deletions

diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 1e5b0d2ece2..969ea7ab9e6 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -79,22 +79,25 @@
         %p.profile-user-bio
           = @user.bio
 
-    %ul.nav-links.center.user-profile-nav
-      %li.js-activity-tab
-        = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
-          Activity
-      %li.js-groups-tab
-        = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do
-          Groups
-      %li.js-contributed-tab
-        = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
-          Contributed projects
-      %li.js-projects-tab
-        = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
-          Personal projects
-      %li.js-snippets-tab
-        = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do
-          Snippets
+    .scrolling-tabs-container
+      .fade-left= icon('angle-left')
+      .fade-right= icon('angle-right')
+      %ul.nav-links.center.user-profile-nav.scrolling-tabs
+        %li.js-activity-tab
+          = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
+            Activity
+        %li.js-groups-tab
+          = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do
+            Groups
+        %li.js-contributed-tab
+          = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
+            Contributed projects
+        %li.js-projects-tab
+          = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
+            Personal projects
+        %li.js-snippets-tab
+          = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do
+            Snippets
 
   %div{ class: container_class }
     - if @user == current_user && !show_user_callout?