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,14 +322,17 @@ 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: 5px $gl-padding;
-  margin: 0;
-  border-radius: $border-radius-default $border-radius-default 0 0;
+  &,
+  .file-holder & {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: $gray-light;
+    border-bottom: 1px solid $border-color;
+    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