diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 96ba7c406344fd40f2d277ab93a6ba142281b95c..d7bb029cac62e3082557eb4b417e61068c11037f 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -44,6 +44,15 @@
     .diff-toggle-caret {
       padding-right: 6px;
     }
+
+    .file-title-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      vertical-align: bottom;
+      max-width: 450px;
+    }
   }
 
   .diff-content {
@@ -480,3 +489,66 @@
     }
   }
 }
+
+/**
+ * Diff file title
+ */
+.file-holder[data-view="parallel"] .file-title-name,
+.file-holder[data-view="inline"] .file-title-name {
+  @media (max-width: $screen-xs) {
+    max-width: 140px;
+  }
+
+  @media (min-width: $screen-xs) and (max-width: $screen-xs-max) {
+    max-width: 250px;
+  }
+
+  @media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
+    max-width: 250px;
+  }
+
+  @media (min-width: $screen-md) and (max-width: $screen-md-max) {
+    max-width: 480px;
+  }
+}
+
+.file-holder[data-view="parallel"] .file-title-name {
+  @media (min-width: $screen-lg) {
+    max-width: 760px;
+  }
+}
+
+.file-holder[data-view="inline"] .file-title-name {
+  @media (min-width: $screen-lg) {
+    max-width: 530px;
+  }
+}
+
+.right-sidebar-expanded {
+  .file-holder[data-view="parallel"] .file-title-name,
+  .file-holder[data-view="inline"] .file-title-name {
+    @media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
+      max-width: 250px;
+    }
+
+    @media (min-width: $screen-md) and (max-width: $screen-md-max) {
+      max-width: 250px;
+    }
+
+    @media (min-width: $screen-lg) {
+      max-width: 460px;
+    }
+  }
+
+  .file-holder[data-view="parallel"] .file-title-name {
+    @media (min-width: $screen-xs) and (max-width: $screen-xs-max) {
+      max-width: 180px;
+    }
+   }
+
+  .file-holder[data-view="inline"] .file-title-name {
+    @media (min-width: $screen-xs) and (max-width: $screen-xs-max) {
+      max-width: 100px;
+    }
+  }
+}
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index 90c9a0c6c2b3edb22cd01fba125c07de210b5f95..7fe450381c510c61934e55f29216089ff0339165 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -10,13 +10,13 @@
 
     - if diff_file.renamed_file
       - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
-      %strong
+      %strong.file-title-name
         = old_path
       →
-      %strong
+      %strong.file-title-name
         = new_path
     - else
-      %strong
+      %strong.file-title-name
         = diff_file.new_path
       - if diff_file.deleted_file
         deleted
diff --git a/changelogs/unreleased/25709-diff-file-overflow.yml b/changelogs/unreleased/25709-diff-file-overflow.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7d1b2b36ab8ff633a97b466dc30b20720b65875e
--- /dev/null
+++ b/changelogs/unreleased/25709-diff-file-overflow.yml
@@ -0,0 +1,4 @@
+---
+title: Responsive title in diffs inline, side by side, with and without sidebar
+merge_request: 8475
+author: