3 files changed, 33 insertions, 5 deletions
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 5ff7edb6077..344b31cf8b7 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -340,7 +340,8 @@ import ProjectVariables from './project_variables';
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
           initNotes();
-          initChangesDropdown();
+          const stickyBarPaddingTop = 16;
+          initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - stickyBarPaddingTop);
           $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
         case 'projects:commit:pipelines':
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5f5b5657a2f..bbbb73201be 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -2,7 +2,9 @@
 .cgray { color: $common-gray; }
 .clgray { color: $common-gray-light; }
 .cred { color: $common-red; }
+svg.cred { fill: $common-red; }
 .cgreen { color: $common-green; }
+svg.cgreen { fill: $common-green; }
 .cdark { color: $common-gray-dark; }
 .text-secondary {
   color: $gl-text-color-secondary;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index bce94e09367..848d7f144dc 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -628,21 +628,46 @@
 }
 
 .diff-file-changes {
-  width: 450px;
+  max-width: 560px;
+  width: 100%;
   z-index: 150;
 
   @media (min-width: $screen-sm-min) {
     left: $gl-padding;
   }
 
-  a {
+  .diff-changed-file {
+    display: flex;
     padding-top: 8px;
     padding-bottom: 8px;
+    min-width: 0;
   }
 
-  .diff-changed-file {
+  .diff-file-changed-icon {
+    margin-top: 2px;
+  }
+
+  .diff-changed-file-content {
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .diff-changed-file-name,
+  .diff-changed-file-path {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .diff-changed-file-path {
+    direction: rtl;
+    color: $gl-text-color-tertiary;
+  }
+
+  .diff-changed-stats {
+    margin-left: auto;
+    white-space: nowrap;
   }
 }