Responsive title in diffs inline, side by side, with and without sidebar

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;
+    }
+  }
+}

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

changelogs/unreleased/25709-diff-file-overflow.yml

+---
+title: Responsive title in diffs inline, side by side, with and without sidebar
+merge_request: 8475
+author: