Correct file-header spacing on compare page

Use special classes when is_compare, similar to is_commit. Default
expectation is diff is being viewed in MR

1 files changed, 20 insertions, 13 deletions

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 02aac58a475..a225645c643 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -7,22 +7,13 @@
     cursor: pointer;
 
     @media (min-width: map-get($grid-breakpoints, md)) {
+      $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height;
+
       position: -webkit-sticky;
       position: sticky;
-      top: $mr-version-controls-height + $header-height + $mr-tabs-height;
-      margin-left: -1px;
-      border-left: 1px solid $border-color;
+      top: $mr-file-header-top;
       z-index: 102;
 
-      &.is-commit {
-        top: $header-height + 36px;
-
-        .with-performance-bar & {
-          top: $header-height + 36px + $performance-bar-height;
-
-        }
-      }
-
       &::before {
         content: '';
         position: absolute;
@@ -35,7 +26,23 @@
       }
 
       .with-performance-bar & {
-        top: $header-height + $performance-bar-height + $mr-version-controls-height + $mr-tabs-height;
+        top: $mr-file-header-top + $performance-bar-height;
+      }
+
+      &.is-commit {
+        top: $header-height + $commit-stat-summary-height;
+
+        .with-performance-bar & {
+          top: $header-height + $commit-stat-summary-height + $performance-bar-height;
+        }
+      }
+
+      &.is-compare {
+        top: $header-height + $compare-branches-sticky-header-height;
+
+        .with-performance-bar & {
+          top: $performance-bar-height + $header-height + $compare-branches-sticky-header-height;
+        }
       }
     }