Use flexbox instead of media queries

Move CSS to correct file

app/assets/stylesheets/framework/files.scss

@@ -231,3 +231,37 @@ span.idiff {
     }
   }
 }
+
+
+.file-title-flex-parent {
+  display: flex;
+  align-items: center;
+  background-color: $gray-light;
+  border-bottom: 1px solid $border-color;
+  padding: 10px $gl-padding;
+  margin: 0;
+  border-radius: 3px 3px 0 0;
+
+  > a {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $gl-text-color;
+  }
+
+  small {
+    margin: 0 10px 0 0;
+  }
+
+  .file-actions-fixed {
+    white-space: nowrap;
+
+    .btn {
+      padding: 0 10px;
+      font-size: 13px;
+      line-height: 28px;
+      display: inline-block;
+    }
+  }
+}

app/assets/stylesheets/pages/diff.scss

@@ -48,15 +48,6 @@
     .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 {
@@ -493,66 +484,3 @@
     }
   }
 }
-
-/**
- * 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.html.haml

 .diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
-  .file-title
+  .file-title-flex-parent
     = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
 
     - unless diff_file.submodule?
-      .file-actions.hidden-xs
+      .file-actions-fixed.hidden-xs
         - if blob_text_viewable?(blob)
           = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip btn-file-option', title: "Toggle comments for this file", disabled: @diff_notes_disabled do
             = icon('comment')