Merge branch 'kp-fix-project-home-header' into 'master'

Make project header section buttons responsive

See merge request gitlab-org/gitlab!62817

app/assets/javascripts/repository/index.js

@@ -141,6 +141,9 @@ export default function setupVueRepositoryList() {
             href: `${historyLink}/${
               this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
             }`,
+            // Ideally passing this class to `props` should work
+            // But it doesn't work here. :(
+            class: 'btn btn-default btn-md gl-button ml-sm-0',
           },
         },
         [__('History')],

app/assets/stylesheets/pages/tree.scss

@@ -10,6 +10,10 @@
       color: $gl-text-color-secondary;
     }
 
+    .tree-ref-holder {
+      margin-right: 15px;
+    }
+
     @include media-breakpoint-up(sm) {
       display: flex;
 
@@ -28,7 +32,6 @@
 
       .tree-ref-holder {
         float: left;
-        margin-right: 15px;
       }
 
       .tree-ref-target-holder {
@@ -44,8 +47,11 @@
   }
 
   @include media-breakpoint-down(xs) {
+    .tree-ref-container {
+      justify-content: space-between;
+    }
+
     .repo-breadcrumb {
-      margin-top: 10px;
       position: relative;
 
       .dropdown-menu {

app/views/projects/_files.html.haml

@@ -7,7 +7,7 @@
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 
 #tree-holder.tree-holder.clearfix
-  .nav-block.gl-display-flex.gl-align-items-center
+  .nav-block.gl-display-flex.gl-xs-flex-direction-column.gl-align-items-stretch
     = render 'projects/tree/tree_header', tree: @tree
 
   #js-last-commit

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

-.tree-ref-container
+.tree-ref-container.gl-display-flex.mb-2.mb-md-0
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
 
@@ -16,5 +16,5 @@
     .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>
+  .project-clone-holder.d-block.d-md-none.mt-sm-2.mt-md-0.ml-md-2>
     = render "shared/mobile_clone_panel"