Solve buttons on new file page wrap outside of the container

app/assets/stylesheets/pages/editor.scss

@@ -36,6 +36,7 @@
     line-height: 35px;
     padding-top: 7px;
     padding-bottom: 7px;
+    display: flex;
     .float-right {
       height: 20px;
@@ -49,6 +50,7 @@
     display: block;
     float: left;
     margin-right: 10px;
+    flex: 1;
   }
   .editor-file-name {
@@ -60,14 +62,10 @@
   .new-file-name {
     display: inline-block;
-    max-width: 450px;
+    max-width: 420px;
     float: left;
     @media(max-width: map-get($grid-breakpoints, lg)-1) {
-      width: 280px;
-    }
-
-    @media(max-width: map-get($grid-breakpoints, md)-1) {
       width: 180px;
     }
   }
@@ -111,9 +109,11 @@
 }
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .file-editor {
     .file-title {
+      display: block;
+
       .float-right {
         height: auto;
       }
@@ -144,6 +144,10 @@
         }
       }
     }
+
+    .editor-ref {
+      max-width: 250px;
+    }
   }
 }

app/views/projects/blob/_editor.html.haml

@@ -2,7 +2,7 @@
 .file-holder-bottom-radius.file-holder.file.append-bottom-default
   .js-file-title.file-title.clearfix{ data: { current_action: action } }
-    .editor-ref
+    .editor-ref.block-truncated
       = sprite_icon('fork', size: 12)
       = ref
     %span.editor-file-name

changelogs/unreleased/47752-buttons-on-new-file-page-wrap-outside-of-container-for-long-branch-names.yml

+---
+title: Fix buttons on the new file page wrapping outside of the container
+merge_request: 21015
+author:
+type: fixed