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,7 +75,8 @@
                     = link_to new_project_tag_path(@project) do
                       #{ _('New tag') }
 
-.tree-controls{ class: ("gl-font-size-0" if vue_file_list_enabled?) }<
+.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-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
@@ -101,8 +102,8 @@
 
     = 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-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