Dynamically truncate branch name on larger viewports

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 {

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)
+      %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')