From e01456fd405d54e880b847e27e184da31d8e64b7 Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Fri, 3 Aug 2018 12:51:54 -0500
Subject: [PATCH 1/2] Solve buttons on new file page wrap outside of the
 container

---
 app/assets/stylesheets/pages/editor.scss         | 16 ++++++++++------
 app/views/projects/blob/_editor.html.haml        |  2 +-
 ...utside-of-container-for-long-branch-names.yml |  5 +++++
 3 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 changelogs/unreleased/47752-buttons-on-new-file-page-wrap-outside-of-container-for-long-branch-names.yml

diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index ddd1f8cc98a..64d5126b783 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 8560b72fe85..ec58309055d 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/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
diff --git a/changelogs/unreleased/47752-buttons-on-new-file-page-wrap-outside-of-container-for-long-branch-names.yml b/changelogs/unreleased/47752-buttons-on-new-file-page-wrap-outside-of-container-for-long-branch-names.yml
new file mode 100644
index 00000000000..81ca632947d
--- /dev/null
+++ b/changelogs/unreleased/47752-buttons-on-new-file-page-wrap-outside-of-container-for-long-branch-names.yml
@@ -0,0 +1,5 @@
+---
+title: Fix buttons on the new file page wrapping outside of the container
+merge_request: 21015
+author:
+type: fixed

From 8b134e7dc4a64b0ebc82b508ea948aa7a07ccb99 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 9 Aug 2018 17:17:13 -0500
Subject: [PATCH 2/2] Dynamically truncate branch name on larger viewports

---
 app/assets/stylesheets/pages/editor.scss  | 13 +++----------
 app/views/projects/blob/_editor.html.haml |  6 +++---
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 64d5126b783..892da152b5f 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -37,10 +37,6 @@
     padding-top: 7px;
     padding-bottom: 7px;
     display: flex;
-
-    .float-right {
-      height: 20px;
-    }
   }
 
   .editor-ref {
@@ -50,7 +46,6 @@
     display: block;
     float: left;
     margin-right: 10px;
-    flex: 1;
   }
 
   .editor-file-name {
@@ -71,7 +66,9 @@
   }
 
   .file-buttons {
-    font-size: 0;
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
   }
 
   .select2 {
@@ -113,10 +110,6 @@
   .file-editor {
     .file-title {
       display: block;
-
-      .float-right {
-        height: auto;
-      }
     }
 
     .new-file-name {
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index ec58309055d..24f256d083b 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -5,8 +5,8 @@
     .editor-ref.block-truncated
       = sprite_icon('fork', size: 12)
       = ref
-    %span.editor-file-name
-      - if current_action?(:edit) || current_action?(:update)
+    - if current_action?(:edit) || current_action?(:update)
+      %span.editor-file-name
         = text_field_tag 'file_path', (params[:file_path] || @path),
                                       class: 'form-control new-file-path js-file-path-name-input'
 
@@ -16,7 +16,7 @@
       = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
         required: true, class: 'form-control new-file-name js-file-path-name-input'
 
-    .float-right.file-buttons
+    .file-buttons
       = button_tag class: 'soft-wrap-toggle btn', type: 'button', tabindex: '-1' do
         %span.no-wrap
           = custom_icon('icon_no_wrap')