1 files changed, 49 insertions, 34 deletions

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 6d998fa1e07..18c62cb4f1e 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -6,6 +6,38 @@
   .file-title-flex-parent {
     cursor: pointer;
 
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 92px;
+      margin-left: -1px;
+      border-left: 1px solid $border-color;
+      z-index: 102;
+
+      &.is-commit {
+        top: $header-height + 36px;
+
+        .with-performance-bar & {
+          top: $header-height + 36px + $performance-bar-height;
+        }
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -11px;
+        width: 10px;
+        height: calc(100% + 1px);
+        background: $white-light;
+        pointer-events: none;
+      }
+
+      .with-performance-bar & {
+        top: 127px;
+      }
+    }
+
     a:hover {
       text-decoration: none;
     }
@@ -253,19 +285,6 @@
         right: 7px;
       }
 
-      .frame {
-        top: 0;
-        right: 0;
-        position: absolute;
-
-        &.deleted {
-          margin: 0;
-          display: block;
-          top: 13px;
-          right: 7px;
-        }
-      }
-
       .swipe-bar {
         display: block;
         height: 100%;
@@ -435,7 +454,7 @@
     .onion-skin.view {
       .swipe-wrap {
         top: 0;
-        right: 0;
+        left: 0;
       }
 
       .frame.deleted {
@@ -692,15 +711,14 @@
   }
 
   @include media-breakpoint-up(sm) {
-    top: 24px;
+    position: -webkit-sticky;
+    position: sticky;
+    top: $header-height;
     background-color: $white-light;
+    z-index: 200;
 
-    &.diff-files-changed-merge-request {
-      position: sticky;
-      top: 90px;
-      z-index: 200;
-      margin: $gl-padding 0;
-      padding: 0;
+    .with-performance-bar & {
+      top: $header-height + $performance-bar-height;
     }
 
     &.is-stuck {
@@ -725,14 +743,6 @@
   }
 }
 
-@include media-breakpoint-up(sm) {
-  .with-performance-bar {
-    .diff-files-changed.diff-files-changed-merge-request {
-      top: 76px + $performance-bar-height;
-    }
-  }
-}
-
 .diff-file-changes {
   max-width: 560px;
   width: 100%;
@@ -842,11 +852,15 @@
     background-repeat: repeat;
   }
 
-  .diff-file-discussions + .discussion-form::before {
-    width: auto;
-    margin-left: -16px;
-    margin-right: -16px;
-    margin-bottom: 16px;
+  .diff-file-discussions + .discussion-form {
+    padding: $gl-padding;
+
+    &::before {
+      width: auto;
+      margin-left: -$gl-padding;
+      margin-right: -$gl-padding;
+      margin-bottom: $gl-padding;
+    }
   }
 
   .notes {
@@ -900,6 +914,7 @@
     padding: 0;
     width: (2px * $image-comment-cursor-left-offset);
     height: (2px * $image-comment-cursor-top-offset);
+    color: $blue-400;
     // center the indicator to match the top left click region
     margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
     margin-left: (-1px * $image-comment-cursor-left-offset) + 1;