Resolve "Merge request refactor: Title and copy to clipboard button are behind the action buttons"

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -201,7 +201,7 @@ export default {
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
-      class="file-actions d-none d-md-block"
+      class="file-actions d-none d-sm-block"
     >
       <template
         v-if="diffFile.blob && diffFile.blob.readableText"

app/assets/stylesheets/framework/files.scss

@@ -322,6 +322,8 @@ span.idiff {
 }
 
 .file-title-flex-parent {
+  &,
+  .file-holder & {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -330,6 +332,7 @@ span.idiff {
     padding: 5px $gl-padding;
     margin: 0;
     border-radius: $border-radius-default $border-radius-default 0 0;
+  }
 
   .file-header-content {
     white-space: nowrap;
@@ -337,6 +340,17 @@ span.idiff {
     text-overflow: ellipsis;
     padding-right: 30px;
     position: relative;
+    width: auto;
+
+    @media (max-width: map-get($grid-breakpoints, sm)-1) {
+      width: 100%;
+    }
+  }
+
+  .file-holder & {
+    .file-actions {
+      position: static;
+    }
   }
 
   .btn-clipboard {

changelogs/unreleased/48603-merge-request-refactor-title-and-copy-to-clipboard-button-are-behind-the-action-buttons.yml

+---
+title: Fix overlapping file title and file actions in MR changes tag
+merge_request:
+author:
+type: fixed