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, 24 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 5ab505034b6..e113d559664 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -476,3 +476,27 @@
     }
   }
 }
+
+.inner-page-scroll-tabs {
+  position: relative;
+
+  .fade-right {
+    @include fade(left, $white-light);
+    right: 0;
+    text-align: right;
+
+    .fa {
+      right: 5px;
+    }
+  }
+
+  .fade-left {
+    @include fade(right, $white-light);
+    left: 0;
+    text-align: left;
+
+    .fa {
+      left: 5px;
+    }
+  }
+}