Fix Web IDE fork modal showing no text

**How?**
This regression was caused by introducing font-size-0 utility
to a parent element. This was to fix a [spacing issue][1] between
buttons.

This MR decides to use flexbox to fix the spacing issue.

It also intrdocues a `gl-ml-children-sm-3` utility class
that automatically adds the margin between children element.

[1]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/24350

app/assets/stylesheets/pages/tree.scss

@@ -17,12 +17,6 @@
       .tree-controls {
         text-align: right;
 
-        > .btn,
-        .project-action-button > .btn,
-        .git-clone-holder > .btn {
-          margin-left: 8px;
-        }
-
         .control {
           float: left;
           margin-left: 10px;

app/assets/stylesheets/utilities.scss

@@ -45,6 +45,12 @@
 .border-bottom-color-default { border-bottom-color: $border-color; }
 .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; }
 
+.gl-children-ml-sm-3 > * {
+  @include media-breakpoint-up(sm) {
+    @include gl-ml-3;
+  }
+}
+
 .mh-50vh { max-height: 50vh; }
 
 .font-size-inherit { font-size: inherit; }

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

@@ -17,7 +17,7 @@
           - else
             = link_to title, project_tree_path(@project, tree_join(@ref, path))
 
-  .tree-controls<
+  .tree-controls.gl-children-ml-sm-3<
     = render 'projects/find_file_link'
     -# only show normal/blame view links for text files
     - if blob.readable_text?

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

@@ -75,34 +75,35 @@
                     = link_to new_project_tag_path(@project) do
                       #{ _('New tag') }
 
-.tree-controls{ class: ("gl-font-size-0" if vue_file_list_enabled?) }<
-  = 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) } }
-  - else
-    = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
-
-  = render 'projects/find_file_link'
-
-  - if can_collaborate || current_user&.already_forked?(@project)
+.tree-controls
+  .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3<
+    = render_if_exists 'projects/tree/lock_link'
     - if vue_file_list_enabled?
-      #js-tree-web-ide-link.d-inline-block
+      #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
     - else
-      = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default qa-web-ide-button' do
+      = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
+
+    = render 'projects/find_file_link'
+
+    - 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')
+    - elsif can_create_mr_from_fork
+      = link_to '#modal-confirm-fork', class: 'btn btn-default qa-web-ide-button', data: { target: '#modal-confirm-fork', toggle: 'modal'} do
         = _('Web IDE')
-  - elsif can_create_mr_from_fork
-    = 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)
+      = 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<
-      = render "projects/buttons/xcode_link"
+    - if show_xcode_link?(@project)
+      .project-action-button.project-xcode.inline<
+        = render "projects/buttons/xcode_link"
 
-  = render 'projects/buttons/download', project: @project, ref: @ref
+    = render 'projects/buttons/download', project: @project, ref: @ref
 
-  .project-clone-holder.d-block.d-md-none.mt-sm-2.mt-md-0>
-    = render "shared/mobile_clone_panel"
+    .project-clone-holder.d-none.d-md-inline-block>
+      = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'
 
-  .project-clone-holder.d-none.d-md-inline-block>
-    = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'
+  .project-clone-holder.d-block.d-md-none.mt-sm-2.mt-md-0.ml-sm-2>
+    = render "shared/mobile_clone_panel"

changelogs/unreleased/207857-fix-web-ide-modal-no-text.yml

+---
+title: Fix Web IDE fork modal showing no text
+merge_request: 25842
+author:
+type: fixed