Remove whitespaces from tree-controls elements

Changes the rendering of tree-controls elements from flex to inline
Removes the whitespaces between them

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,21 +17,19 @@
           - else
             = link_to title, project_tree_path(@project, tree_join(@ref, path))
 
-  .tree-controls
+  .tree-controls<
     = render 'projects/find_file_link'
+    -# only show normal/blame view links for text files
+    - if blob.readable_text?
+      - if blame
+        = link_to 'Normal view', project_blob_path(@project, @id),
+            class: 'btn'
+      - else
+        = link_to 'Blame', project_blame_path(@project, @id),
+            class: 'btn js-blob-blame-link' unless blob.empty?
 
-    .btn-group{ role: "group" }<
-      -# only show normal/blame view links for text files
-      - if blob.readable_text?
-        - if blame
-          = link_to 'Normal view', project_blob_path(@project, @id),
-              class: 'btn'
-        - else
-          = link_to 'Blame', project_blame_path(@project, @id),
-              class: 'btn js-blob-blame-link' unless blob.empty?
+    = link_to 'History', project_commits_path(@project, @id),
+        class: 'btn'
 
-      = link_to 'History', project_commits_path(@project, @id),
-          class: 'btn'
-
-      = link_to 'Permalink', project_blob_path(@project,
-          tree_join(@commit.sha, @path)), class: 'btn js-data-file-blob-permalink-url'
+    = link_to 'Permalink', project_blob_path(@project,
+        tree_join(@commit.sha, @path)), class: 'btn js-data-file-blob-permalink-url'

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,20 +85,19 @@
   = 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
-        - else
-          = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default qa-web-ide-button' do
-            = _('Web IDE')
+    - if can_collaborate || current_user&.already_forked?(@project)
+      - if vue_file_list_enabled?
+        #js-tree-web-ide-link.d-inline-block
       - else
-        = link_to '#modal-confirm-fork', class: 'btn btn-default qa-web-ide-button', data: { target: '#modal-confirm-fork', toggle: 'modal'} do
+        = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default qa-web-ide-button' do
           = _('Web IDE')
-        = render 'shared/confirm_fork_modal', fork_path: ide_fork_and_edit_path(@project, @ref, @path)
+    - else
+      = link_to '#modal-confirm-fork', class: 'btn btn-default qa-web-ide-button', data: { target: '#modal-confirm-fork', toggle: 'modal'} do
+        = _('Web IDE')
+      = 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