Resolve "Scrolling tabs are broken on profile, activity, and projects"

5 files changed, 23 insertions, 26 deletions

diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index d76cf8f8182..0b645eb811b 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -186,6 +186,7 @@
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   display: flex;
+  flex-wrap: nowrap;
 
   &::-webkit-scrollbar {
     display: none;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 847fc8c0792..4e2cc498883 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -230,6 +230,8 @@
 }
 
 .scrolling-tabs-container {
+  position: relative;
+
   .merge-request-tabs-container & {
     overflow: hidden;
   }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 9eceb3e9a33..f50ca677800 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -678,6 +678,7 @@
 
 .merge-request-tabs {
   display: flex;
+  flex-wrap: nowrap;
   margin-bottom: 0;
   padding: 0;
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 22964163e95..caafda5fb05 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -354,12 +354,6 @@
   min-width: 200px;
 }
 
-.deploy-keys {
-  .scrolling-tabs-container {
-    position: relative;
-  }
-}
-
 .deploy-key {
   // Ensure that the fingerprint does not overflow on small screens
   .fingerprint {
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 01e38ffee20..2f1877a15c2 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -32,26 +32,25 @@
         .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
           .fade-left= icon('angle-left')
           .fade-right= icon('angle-right')
-          .nav-links.scrolling-tabs.nav.nav-tabs
-            %ul.merge-request-tabs.nav-tabs.nav
-              %li.notes-tab
-                = tab_link_for @merge_request, :show, force_link: @commit.present? do
-                  Discussion
-                  %span.badge.badge-pill= @merge_request.related_notes.user.count
-              - if @merge_request.source_project
-                %li.commits-tab
-                  = tab_link_for @merge_request, :commits do
-                    Commits
-                    %span.badge.badge-pill= @commits_count
-              - if @pipelines.any?
-                %li.pipelines-tab
-                  = tab_link_for @merge_request, :pipelines do
-                    Pipelines
-                    %span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
-              %li.diffs-tab
-                = tab_link_for @merge_request, :diffs do
-                  Changes
-                  %span.badge.badge-pill= @merge_request.diff_size
+          %ul.merge-request-tabs.nav-tabs.nav.nav-links.scrolling-tabs
+            %li.notes-tab
+              = tab_link_for @merge_request, :show, force_link: @commit.present? do
+                Discussion
+                %span.badge.badge-pill= @merge_request.related_notes.user.count
+            - if @merge_request.source_project
+              %li.commits-tab
+                = tab_link_for @merge_request, :commits do
+                  Commits
+                  %span.badge.badge-pill= @commits_count
+            - if @pipelines.any?
+              %li.pipelines-tab
+                = tab_link_for @merge_request, :pipelines do
+                  Pipelines
+                  %span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
+            %li.diffs-tab
+              = tab_link_for @merge_request, :diffs do
+                Changes
+                %span.badge.badge-pill= @merge_request.diff_size
 
         - if has_vue_discussions_cookie?
           #js-vue-discussion-counter