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

Adds MR ID to CHANGELOG entry

1 files changed, 72 insertions, 0 deletions

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 96ba7c40634..d7bb029cac6 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;
+    }
+  }
+}