Improved the design of the changed files dropdown

Closes #36687

app/assets/javascripts/dispatcher.js

@@ -340,7 +340,7 @@ import ProjectVariables from './project_variables';
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
           initNotes();
-          initChangesDropdown();
+          initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - 16);
           $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
         case 'projects:commit:pipelines':

app/assets/stylesheets/pages/diff.scss

@@ -628,21 +628,45 @@
 }
 
 .diff-file-changes {
-  width: 450px;
+  max-width: 550px;
+  width: 100%;
   z-index: 150;
 
   @media (min-width: $screen-sm-min) {
     left: $gl-padding;
   }
 
-  a {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-
   .diff-changed-file {
     display: flex;
-    align-items: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    min-width: 0;
+  }
+
+  .diff-file-changed-icon {
+    margin-top: 2px;
+  }
+
+  .diff-changed-file-content {
+    display: flex;
+    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;
+  }
+
+  .diff-changed-stats {
+    margin-left: auto;
+    white-space: nowrap;
   }
 }
 

app/views/projects/diffs/_stats.html.haml

@@ -22,9 +22,11 @@
         - diff_files.each do |diff_file|
           %li
             %a.diff-changed-file{ href: "##{hexdigest(diff_file.file_path)}", title: diff_file.new_path }
-              = icon("#{diff_file_changed_icon(diff_file)} fw", class: "#{diff_file_changed_icon_color(diff_file)} append-right-5")
-              %span.diff-file-changes-path.append-right-5= diff_file.new_path
-              .pull-right
+              = icon("#{diff_file_changed_icon(diff_file)} fw", class: "#{diff_file_changed_icon_color(diff_file)} diff-file-changed-icon append-right-8")
+              %span.diff-changed-file-content.append-right-8
+                %strong.diff-changed-file-name= diff_file.blob.name
+                %span.diff-changed-file-path.prepend-top-5= diff_file.new_path
+              %span.diff-changed-stats
                 %span.cgreen<
                   +#{diff_file.added_lines}
                 %span.cred<

changelogs/unreleased/improved-changes-dropdown.yml

@@ -0,0 +1,5 @@
+---
+title: Improved diff changed files dropdown design
+merge_request:
+author:
+type: changed