Merge branch 'mr-sticky-headers' into 'master'

Made diff file headers sticky

Closes #48816

See merge request gitlab-org/gitlab-ce!23249

app/assets/javascripts/diffs/components/diff_file_header.vue

 <script>
 import _ from 'underscore';
 import { mapActions, mapGetters } from 'vuex';
+import { polyfillSticky } from '~/lib/utils/sticky';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -116,6 +117,9 @@ export default {
       return `\`${this.diffFile.file_path}\``;
     },
   },
+  mounted() {
+    polyfillSticky(this.$refs.header);
+  },
   methods: {
     ...mapActions('diffs', ['toggleFileDiscussions']),
     handleToggleFile(e, checkTarget) {

app/assets/stylesheets/pages/diff.scss

@@ -6,6 +6,28 @@
   .file-title-flex-parent {
     cursor: pointer;
 
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 92px;
+      z-index: 102;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -10px;
+        width: 10px;
+        height: calc(100% + 1px);
+        background: $white-light;
+        border-right: 1px solid $border-color;
+      }
+    }
+
+    .with-performance-bar & {
+      top: 127px;
+    }
+
     a:hover {
       text-decoration: none;
     }

changelogs/unreleased/mr-sticky-headers.yml

+---
+title: Make diff file headers sticky
+merge_request:
+author:
+type: changed