Fix secondary nav dropdown menu styling in tablet and mobile screens

17 files changed, 36 insertions, 31 deletions

diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index d5693a5d1a1..f48b3ddc912 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -363,6 +363,12 @@
     background-color: $white-light;
     border-top: 0;
   }
+
+  .filter-dropdown-container {
+    .dropdown {
+      margin-left: 0;
+    }
+  }
 }
 
 @include media-breakpoint-down(sm) {
@@ -372,16 +378,6 @@
     .dropdown-menu {
       width: 100%;
     }
-
-    .dropdown {
-      margin-left: 0;
-    }
-
-    .fa-chevron-down {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index de9e7c37695..19640ab5986 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -158,6 +158,10 @@
         width: 100%;
       }
 
+      .dropdown-menu-toggle {
+        margin-bottom: 0;
+      }
+
       form {
         display: block;
         height: auto;
diff --git a/app/views/admin/runners/_sort_dropdown.html.haml b/app/views/admin/runners/_sort_dropdown.html.haml
index b201e6bf10e..19c2a50ebd9 100644
--- a/app/views/admin/runners/_sort_dropdown.html.haml
+++ b/app/views/admin/runners/_sort_dropdown.html.haml
@@ -1,7 +1,7 @@
 - sorted_by = sort_options_hash[@sort]
 
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
     = sorted_by
     = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index b694103ccaf..f518205f14c 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -1,8 +1,8 @@
 - if current_user
   .dropdown
-    %button.dropdown-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
-      = icon('globe')
-      %span.light= _("Visibility:")
+    %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
+      = icon('globe', class: 'mt-1')
+      %span.light.ml-3= _("Visibility:")
       - if params[:visibility_level].present?
         = visibility_level_label(params[:visibility_level].to_i)
       - else
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index b44ea89510b..c63c34c4ebb 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -9,7 +9,7 @@
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
     .dropdown
-      %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+      %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
         %span.light sort:
         - if @sort.present?
           = sort_options_hash[@sort]
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 37535370940..026bc44a05f 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -14,7 +14,7 @@
         = 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 }
 
       .dropdown
-        %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
             = tags_sort_options_hash[@sort]
           = icon('chevron-down')
diff --git a/app/views/shared/_milestones_sort_dropdown.html.haml b/app/views/shared/_milestones_sort_dropdown.html.haml
index a6ba3b59365..bd68a3e4c84 100644
--- a/app/views/shared/_milestones_sort_dropdown.html.haml
+++ b/app/views/shared/_milestones_sort_dropdown.html.haml
@@ -1,5 +1,5 @@
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
     %span.light
     - if @sort.present?
       = milestone_sort_options_hash[@sort]
diff --git a/app/views/shared/_sort_dropdown.html.haml b/app/views/shared/_sort_dropdown.html.haml
index be6d4f1c32b..e4463c1e0d8 100644
--- a/app/views/shared/_sort_dropdown.html.haml
+++ b/app/views/shared/_sort_dropdown.html.haml
@@ -2,7 +2,7 @@
 - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues'
 
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
     = sorted_by
     = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
diff --git a/app/views/shared/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml
index 2237b93a10b..1ae6d1f5ee3 100644
--- a/app/views/shared/groups/_dropdown.html.haml
+++ b/app/views/shared/groups/_dropdown.html.haml
@@ -9,7 +9,7 @@
     - default_sort_by = sort_value_recently_created
 
 .dropdown.inline.js-group-filter-dropdown-wrap.append-right-10
-  %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+  %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
     %span.dropdown-label
       = options_hash[default_sort_by]
     = icon('chevron-down')
diff --git a/app/views/shared/labels/_sort_dropdown.html.haml b/app/views/shared/labels/_sort_dropdown.html.haml
index 8a7d037e15b..d664ef1cc2f 100644
--- a/app/views/shared/labels/_sort_dropdown.html.haml
+++ b/app/views/shared/labels/_sort_dropdown.html.haml
@@ -1,6 +1,6 @@
 - sort_title = label_sort_options_hash[@sort] || sort_title_name_desc
 .dropdown.inline
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
     = sort_title
     = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort
diff --git a/changelogs/unreleased/54648-fix-order-by-dropdown-tablet-screens.yml b/changelogs/unreleased/54648-fix-order-by-dropdown-tablet-screens.yml
new file mode 100644
index 00000000000..671d1590991
--- /dev/null
+++ b/changelogs/unreleased/54648-fix-order-by-dropdown-tablet-screens.yml
@@ -0,0 +1,5 @@
+---
+title: Fix Order By dropdown menu styling in tablet and mobile screens
+merge_request: 23446
+author:
+type: fixed
diff --git a/spec/features/issues/filtered_search/filter_issues_spec.rb b/spec/features/issues/filtered_search/filter_issues_spec.rb
index 35d57b3896d..4d9b8262f21 100644
--- a/spec/features/issues/filtered_search/filter_issues_spec.rb
+++ b/spec/features/issues/filtered_search/filter_issues_spec.rb
@@ -430,10 +430,10 @@ describe 'Filter issues', :js do
 
         expect_issues_list_count(2)
 
-        sort_toggle = find('.filtered-search-wrapper .dropdown-toggle')
+        sort_toggle = find('.filter-dropdown-container .dropdown-menu-toggle')
         sort_toggle.click
 
-        find('.filtered-search-wrapper .dropdown-menu li a', text: 'Created date').click
+        find('.filter-dropdown-container .dropdown-menu li a', text: 'Created date').click
         wait_for_requests
 
         expect(find('.issues-list .issue:first-of-type .issue-title-text a')).to have_content(new_issue.title)
diff --git a/spec/features/issues/user_sorts_issues_spec.rb b/spec/features/issues/user_sorts_issues_spec.rb
index 4771d2c6d28..3bc93933183 100644
--- a/spec/features/issues/user_sorts_issues_spec.rb
+++ b/spec/features/issues/user_sorts_issues_spec.rb
@@ -20,7 +20,7 @@ describe "User sorts issues" do
   end
 
   it 'keeps the sort option' do
-    find('button.dropdown-toggle').click
+    find('.filter-dropdown-container button.dropdown-menu-toggle').click
 
     page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link('Milestone')
@@ -40,7 +40,7 @@ describe "User sorts issues" do
   end
 
   it "sorts by popularity" do
-    find("button.dropdown-toggle").click
+    find(".filter-dropdown-container button.dropdown-menu-toggle").click
 
     page.within(".content ul.dropdown-menu.dropdown-menu-right li") do
       click_link("Popularity")
diff --git a/spec/features/merge_requests/user_sorts_merge_requests_spec.rb b/spec/features/merge_requests/user_sorts_merge_requests_spec.rb
index e163868e8e7..61e8f1c4662 100644
--- a/spec/features/merge_requests/user_sorts_merge_requests_spec.rb
+++ b/spec/features/merge_requests/user_sorts_merge_requests_spec.rb
@@ -19,7 +19,7 @@ describe 'User sorts merge requests' do
   end
 
   it 'keeps the sort option' do
-    find('button.dropdown-toggle').click
+    find('.filter-dropdown-container button.dropdown-menu-toggle').click
 
     page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link('Milestone')
@@ -49,7 +49,7 @@ describe 'User sorts merge requests' do
   it 'separates remember sorting with issues' do
     create(:issue, project: project)
 
-    find('button.dropdown-toggle').click
+    find('.filter-dropdown-container button.dropdown-menu-toggle').click
 
     page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link('Milestone')
@@ -70,7 +70,7 @@ describe 'User sorts merge requests' do
     end
 
     it 'sorts by popularity' do
-      find('button.dropdown-toggle').click
+      find('.filter-dropdown-container button.dropdown-menu-toggle').click
 
       page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
         click_link('Popularity')
diff --git a/spec/features/projects/labels/issues_sorted_by_priority_spec.rb b/spec/features/projects/labels/issues_sorted_by_priority_spec.rb
index 6178f11ded7..b778c72bc76 100644
--- a/spec/features/projects/labels/issues_sorted_by_priority_spec.rb
+++ b/spec/features/projects/labels/issues_sorted_by_priority_spec.rb
@@ -32,7 +32,7 @@ describe 'Issue prioritization' do
       visit project_issues_path(project, sort: 'label_priority')
 
       # Ensure we are indicating that issues are sorted by priority
-      expect(page).to have_selector('.dropdown-toggle', text: 'Label priority')
+      expect(page).to have_selector('.dropdown-menu-toggle', text: 'Label priority')
 
       page.within('.issues-holder') do
         issue_titles = all('.issues-list .issue-title-text').map(&:text)
@@ -70,7 +70,7 @@ describe 'Issue prioritization' do
       sign_in user
       visit project_issues_path(project, sort: 'label_priority')
 
-      expect(page).to have_selector('.dropdown-toggle', text: 'Label priority')
+      expect(page).to have_selector('.dropdown-menu-toggle', text: 'Label priority')
 
       page.within('.issues-holder') do
         issue_titles = all('.issues-list .issue-title-text').map(&:text)
diff --git a/spec/support/helpers/features/sorting_helpers.rb b/spec/support/helpers/features/sorting_helpers.rb
index ad0053ec5cf..a1ae428586e 100644
--- a/spec/support/helpers/features/sorting_helpers.rb
+++ b/spec/support/helpers/features/sorting_helpers.rb
@@ -13,7 +13,7 @@ module Spec
       module Features
         module SortingHelpers
           def sort_by(value)
-            find('button.dropdown-toggle').click
+            find('.filter-dropdown-container button.dropdown-menu-toggle').click
 
             page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
               click_link(value)
diff --git a/spec/support/helpers/sorting_helper.rb b/spec/support/helpers/sorting_helper.rb
index 9496a94d8f4..e505a6b7258 100644
--- a/spec/support/helpers/sorting_helper.rb
+++ b/spec/support/helpers/sorting_helper.rb
@@ -10,7 +10,7 @@
 #
 module SortingHelper
   def sorting_by(value)
-    find('button.dropdown-toggle').click
+    find('.filter-dropdown-container button.dropdown-menu-toggle').click
     page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link value
     end