Merge branch '37680-tree-control-buttons-misbehave-on-small-viewports' into 'master'

Resolve "Tree control buttons misbehave on small viewports"

Closes #37680

See merge request gitlab-org/gitlab!20952

app/assets/stylesheets/pages/tree.scss

@@ -15,7 +15,6 @@
       }
 
       .tree-controls {
-        display: flex;
         text-align: right;
 
         .btn {

app/views/projects/artifacts/browse.html.haml

@@ -15,7 +15,7 @@
         %li.breadcrumb-item
           = link_to truncate(title, length: 40), browse_project_job_artifacts_path(@project, @build, path)
 
-    .tree-controls
+    .tree-controls<
       = link_to download_project_job_artifacts_path(@project, @build),
         rel: 'nofollow', download: '', class: 'btn btn-default download' do
         = sprite_icon('download')

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

@@ -17,10 +17,8 @@
           - else
             = link_to title, project_tree_path(@project, tree_join(@ref, path))
 
-  .tree-controls
+  .tree-controls<
     = render 'projects/find_file_link'
-
-    .btn-group{ role: "group" }<
     -# only show normal/blame view links for text files
     - if blob.readable_text?
       - if blame

app/views/projects/buttons/_dropdown.html.haml

@@ -7,7 +7,7 @@
 - show_menu = can_create_issue || can_create_project_snippet || can_push_code || create_mr_from_new_fork || merge_project
 
 - if show_menu
-  .project-action-button.dropdown.inline
+  .project-action-button.dropdown.inline<
     %a.btn.dropdown-toggle.has-tooltip.qa-create-new-dropdown{ href: '#', title: _('Create new...'), 'data-toggle' => 'dropdown', 'data-container' => 'body', 'aria-label' => _('Create new...'), 'data-display' => 'static' }
       = icon('plus')
       = icon("caret-down")

app/views/projects/commits/show.html.haml

@@ -13,7 +13,7 @@
 
         %ul.breadcrumb.repo-breadcrumb
           = commits_breadcrumbs
-      .tree-controls.d-none.d-sm-none.d-md-block
+      .tree-controls.d-none.d-sm-none.d-md-block<
         - if @merge_request.present?
           .control
             = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'

app/views/projects/tree/_tree_header.html.haml

@@ -75,7 +75,7 @@
                     = link_to new_project_tag_path(@project) do
                       #{ _('New tag') }
 
-.tree-controls
+.tree-controls<
   = render_if_exists 'projects/tree/lock_link'
   - if vue_file_list_enabled?
     #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
@@ -85,7 +85,6 @@
   = render 'projects/find_file_link'
 
   - if can_create_mr_from_fork
-    = succeed " " do
     - if can_collaborate || current_user&.already_forked?(@project)
       - if vue_file_list_enabled?
         #js-tree-web-ide-link.d-inline-block
@@ -98,7 +97,7 @@
       = render 'shared/confirm_fork_modal', fork_path: ide_fork_and_edit_path(@project, @ref, @path)
 
   - if show_xcode_link?(@project)
-    .project-action-button.project-xcode.inline
+    .project-action-button.project-xcode.inline<
       = render "projects/buttons/xcode_link"
 
   = render 'projects/buttons/download', project: @project, ref: @ref

changelogs/unreleased/37680-tree-control-buttons-misbehave-on-small-viewports.yml

+---
+title: Remove whitespaces between tree-controls elements
+merge_request: 20952
+author:
+type: other