Merge branch '56938-diff-file-headers-on-compare-not-quite-right' into 'master'

Resolve "Diff file headers on 'Compare' not quite right"

Closes #56938

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

3 files changed, 29 insertions, 13 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 037a5adfb7e..4d8f1ee51a6 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -4,6 +4,7 @@
  */
 .file-holder {
   border: 1px solid $border-color;
+  border-top: 0;
   border-radius: $border-radius-default;
 
   &.file-holder-no-border {
@@ -328,6 +329,7 @@ span.idiff {
     justify-content: space-between;
     background-color: $gray-light;
     border-bottom: 1px solid $border-color;
+    border-top: 1px solid $border-color;
     padding: 5px $gl-padding;
     margin: 0;
     border-radius: $border-radius-default $border-radius-default 0 0;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9eae9a831fa..7088a6f59dc 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -490,6 +490,7 @@ $builds-trace-bg: #111;
 */
 $commit-max-width-marker-color: rgba(0, 0, 0, 0);
 $commit-message-text-area-bg: rgba(0, 0, 0, 0);
+$commit-stat-summary-height: 36px;
 
 /*
 * Common
@@ -664,8 +665,14 @@ $priority-label-empty-state-width: 114px;
 Issues Analytics
 */
 $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
+
 /*
 Merge Requests
 */
 $mr-tabs-height: 51px;
 $mr-version-controls-height: 56px;
+
+/*
+Compare Branches
+*/
+$compare-branches-sticky-header-height: 68px;
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;
+        }
       }
     }