Fix changes dropdown ellipsis working across browserschanges-dropdown-ellipsis

Closes #41561

5 files changed, 25 insertions, 4 deletions

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 60b07537799..1d081b58f62 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -651,15 +651,13 @@
     min-width: 0;
   }
 
-  .diff-changed-file-name,
-  .diff-changed-file-path {
+  .diff-changed-file-name {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .diff-changed-file-path {
-    direction: rtl;
     color: $gl-text-color-tertiary;
   }
 
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 1ce487e6592..0f5fc2823a3 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -226,4 +226,12 @@ module DiffHelper
 
     diffs.overflow?
   end
+
+  def diff_file_path_text(diff_file, max: 60)
+    path = diff_file.new_path
+
+    return path unless path.size > max && max > 3
+
+    "...#{path[-(max - 3)..-1]}"
+  end
 end
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index dd473ebe580..325159dd9a7 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -25,7 +25,7 @@
               = sprite_icon(diff_file_changed_icon(diff_file), size: 16, css_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-file-path.prepend-top-5= diff_file_path_text(diff_file)
               %span.diff-changed-stats
                 %span.cgreen<
                   +#{diff_file.added_lines}
diff --git a/changelogs/unreleased/changes-dropdown-ellipsis.yml b/changelogs/unreleased/changes-dropdown-ellipsis.yml
new file mode 100644
index 00000000000..7e3f378cc33
--- /dev/null
+++ b/changelogs/unreleased/changes-dropdown-ellipsis.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed chanages dropdown ellipsis positioning
+merge_request:
+author:
+type: fixed
diff --git a/spec/helpers/diff_helper_spec.rb b/spec/helpers/diff_helper_spec.rb
index f9c31ac61d8..15cbe36ae76 100644
--- a/spec/helpers/diff_helper_spec.rb
+++ b/spec/helpers/diff_helper_spec.rb
@@ -266,4 +266,14 @@ describe DiffHelper do
       end
     end
   end
+
+  context '#diff_file_path_text' do
+    it 'returns full path by default' do
+      expect(diff_file_path_text(diff_file)).to eq(diff_file.new_path)
+    end
+
+    it 'returns truncated path' do
+      expect(diff_file_path_text(diff_file, max: 10)).to eq("...open.rb")
+    end
+  end
 end