Fixed long filename being under action buttonslong-file-name-overflow

Closes #26607

4 files changed, 17 insertions, 10 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 30f242a35db..ffece53a093 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -271,6 +271,7 @@ span.idiff {
       font-size: 13px;
       line-height: 28px;
       display: inline-block;
+      float: none;
     }
   }
 }
diff --git a/app/views/projects/blob/_actions.html.haml b/app/views/projects/blob/_actions.html.haml
index 7b9cfbbd067..c44d8fcd430 100644
--- a/app/views/projects/blob/_actions.html.haml
+++ b/app/views/projects/blob/_actions.html.haml
@@ -1,7 +1,8 @@
-.btn-group
-  = view_on_environment_button(@commit.sha, @path, @environment) if @environment
+- if @environment
+  .btn-group<
+    = view_on_environment_button(@commit.sha, @path, @environment)
 
-.btn-group.tree-btn-group
+.btn-group{ role: "group" }<
   = link_to 'Raw', namespace_project_raw_path(@project.namespace, @project, @id),
       class: 'btn btn-sm', target: '_blank'
   -# only show normal/blame view links for text files
@@ -18,7 +19,7 @@
       tree_join(@commit.sha, @path)), class: 'btn btn-sm js-data-file-blob-permalink-url'
 
 - if current_user
-  .btn-group{ role: "group" }
+  .btn-group{ role: "group" }<
     - if blob_text_viewable?(@blob)
       = edit_blob_link
     = replace_blob_link
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 19fa4c78501..41a7191302d 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -24,12 +24,13 @@
 
 #blob-content-holder.blob-content-holder
   %article.file-holder
-    .js-file-title.file-title
-      = blob_icon blob.mode, blob.name
-      %strong
-        = blob.name
-      %small
-        = number_to_human_size(blob_size(blob))
+    .js-file-title.file-title-flex-parent
+      .file-header-content
+        = blob_icon blob.mode, blob.name
+        %strong.file-title-name
+          = blob.name
+        %small
+          = number_to_human_size(blob_size(blob))
       .file-actions.hidden-xs
         = render "actions"
     = render blob, blob: blob
diff --git a/changelogs/unreleased/long-file-name-overflow.yml b/changelogs/unreleased/long-file-name-overflow.yml
new file mode 100644
index 00000000000..7ccf05491e1
--- /dev/null
+++ b/changelogs/unreleased/long-file-name-overflow.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed long file names overflowing under action buttons
+merge_request:
+author: