Merge request tabs fixes

- Makes activity dropdown and resolved counter smaller
- Uses grid for spacing
- Removes scrolling on MR tabs

7 files changed, 29 insertions, 32 deletions

diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 214630d245a..8212fb8bb33 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -34,7 +34,7 @@
             = icon('spinner spin')
 
   .todos-filters
-    .row-content-block.second-block
+    .issues-details-filters.row-content-block.second-block
       = form_tag todos_filter_path(without: [:project_id, :author_id, :type, :action_id]), method: :get, class: 'filter-form d-sm-flex' do
         .filter-categories.flex-fill
           .filter-item.inline
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 77fe88dacb7..255a9ad038c 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -9,7 +9,7 @@
   = render 'groups/home_panel'
 
   .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
-    .top-area.group-nav-container
+    .top-area.group-nav-container.justify-content-between
       .scrolling-tabs-container.inner-page-scroll-tabs
         .fade-left= icon('angle-left')
         .fade-right= icon('angle-right')
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index fbd70cd1906..457b2936278 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -8,18 +8,18 @@
   - create_branch_path = project_branches_path(@project, branch_name: @issue.to_branch_name, ref: @project.default_branch, issue_iid: @issue.iid)
   - refs_path = refs_namespace_project_path(@project.namespace, @project, search: '')
 
-  .create-mr-dropdown-wrap.d-inline-block{ data: { can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path } }
-    .btn-group.unavailable
+  .create-mr-dropdown-wrap.d-inline-block.full-width-mobile{ data: { can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path } }
+    .btn-group.btn-group-sm.unavailable
       %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
         = icon('spinner', class: 'fa-spin')
         %span.text
           Checking branch availability…
 
-    .btn-group.available.hidden
+    .btn-group.btn-group-sm.available.hidden
       %button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
         = value
 
-      %button.btn.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
+      %button.btn.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle.flex-grow-0{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
         = icon('caret-down')
 
       .droplab-dropdown
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 05aeb5d972b..a201fafb949 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -31,29 +31,26 @@
 
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
       .merge-request-tabs-container
-        .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-          .fade-left= icon('angle-left')
-          .fade-right= icon('angle-right')
-          %ul.merge-request-tabs.nav-tabs.nav.nav-links.scrolling-tabs
-            %li.notes-tab.qa-notes-tab
-              = tab_link_for @merge_request, :show, force_link: @commit.present? do
-                = _("Discussion")
-                %span.badge.badge-pill= @merge_request.related_notes.user.count
-            - if @merge_request.source_project
-              %li.commits-tab
-                = tab_link_for @merge_request, :commits do
-                  = _("Commits")
-                  %span.badge.badge-pill= @commits_count
-            - if @pipelines.any?
-              %li.pipelines-tab
-                = tab_link_for @merge_request, :pipelines do
-                  = _("Pipelines")
-                  %span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
-            %li.diffs-tab.qa-diffs-tab
-              = tab_link_for @merge_request, :diffs do
-                = _("Changes")
-                %span.badge.badge-pill= @merge_request.diff_size
-        .d-inline-flex.flex-wrap
+        %ul.merge-request-tabs.nav-tabs.nav.nav-links
+          %li.notes-tab.qa-notes-tab
+            = tab_link_for @merge_request, :show, force_link: @commit.present? do
+              = _("Discussion")
+              %span.badge.badge-pill= @merge_request.related_notes.user.count
+          - if @merge_request.source_project
+            %li.commits-tab
+              = tab_link_for @merge_request, :commits do
+                = _("Commits")
+                %span.badge.badge-pill= @commits_count
+          - if @pipelines.any?
+            %li.pipelines-tab
+              = tab_link_for @merge_request, :pipelines do
+                = _("Pipelines")
+                %span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
+          %li.diffs-tab.qa-diffs-tab
+            = tab_link_for @merge_request, :diffs do
+              = _("Changes")
+              %span.badge.badge-pill= @merge_request.diff_size
+        .d-flex.flex-wrap.align-items-center.justify-content-lg-end
           #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@merge_request),
             notes_filters: UserPreference.notes_filters.to_json } }
           #js-vue-discussion-counter
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 458096f9dd6..2e78b0bff3e 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -9,7 +9,7 @@
     .nav-text.row-main-content
       = s_('TagsPage|Tags give the ability to mark specific points in history as being important')
 
-    .nav-controls.row-fixed-content
+    .nav-controls
       = form_tag(filter_tags_path, method: :get) do
         = search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index 0be62bc5612..59232372150 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -18,7 +18,7 @@
       - else
         = s_("TagsPage|Can't find HEAD commit for this tag")
 
-    .nav-controls.controls-flex
+    .nav-controls
       - if can?(current_user, :push_code, @project)
         = link_to edit_project_tag_release_path(@project, @tag.name), class: 'btn btn-edit controls-item has-tooltip', title: s_('TagsPage|Edit release notes') do
           = icon("pencil")
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 6dc61088e65..a71bfd624e4 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -9,7 +9,7 @@
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
 
 .user-profile
-  .cover-block.user-cover-block.top-area
+  .cover-block.user-cover-block
     .cover-controls
       - if @user == current_user
         = link_to profile_path, class: 'btn btn-default has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile' do