From 5db587a1adb6c51a2e3e5ab44ef35779f9a6917d Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 6 Jan 2017 11:58:51 +0000
Subject: [PATCH] Responsive title in diffs inline, side by side, with and
 without sidebar

Adds MR ID to CHANGELOG entry
---
 app/assets/stylesheets/pages/diff.scss        | 72 +++++++++++++++++++
 .../projects/diffs/_file_header.html.haml     |  6 +-
 .../unreleased/25709-diff-file-overflow.yml   |  4 ++
 3 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 changelogs/unreleased/25709-diff-file-overflow.yml

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;
+    }
+  }
+}
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index 90c9a0c6c2b..7fe450381c5 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
       &rarr;
-      %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 00000000000..7d1b2b36ab8
--- /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:
-- 
GitLab