Merge branch 'changes-overflow-fix' into 'master'

Fixed overflow issue in changes dropdown

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

app/assets/stylesheets/pages/diff.scss

@@ -634,8 +634,16 @@
     padding-top: 8px;
     padding-bottom: 8px;
   }
+
+  .diff-changed-file {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .diff-file-changes-path {
-  @include str-truncated(78%);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

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

@@ -21,9 +21,9 @@
       %ul
         - diff_files.each do |diff_file|
           %li
-            %a{ href: "##{hexdigest(diff_file.file_path)}", title: diff_file.new_path }
+            %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= diff_file.new_path
+              %span.diff-file-changes-path.append-right-5= diff_file.new_path
               .pull-right
                 %span.cgreen<
                   +#{diff_file.added_lines}