Align file header items while keeping collapse functionality

app/assets/stylesheets/framework/files.scss

@@ -236,17 +236,27 @@ span.idiff {
 .file-title-flex-parent {
   display: flex;
   align-items: center;
+  justify-content:space-between;
   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;
+  .file-header-content {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding-right: 30px;
+    position: relative;
+  }
+
+  .btn-clipboard {
+    position: absolute;
+    right: 0;
+  }
+
+  a {
     color: $gl-text-color;
   }
 

app/assets/stylesheets/pages/diff.scss

@@ -34,7 +34,8 @@
     }
   }
 
-  .file-title {
+  .file-title,
+  .file-title-flex-parent {
     cursor: pointer;
 
     a:hover {

app/views/projects/diffs/_file.html.haml

 - environment = local_assigns.fetch(:environment, nil)
 .diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
   .js-file-title.file-title-flex-parent
+    .file-header-content
       = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
 
     - unless diff_file.submodule?