Fix secondary nav dropdown menu styling in tablet and mobile screens

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;
-    }
   }
 }
 

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;

app/views/admin/runners/_sort_dropdown.html.haml

 - 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

app/views/explore/projects/_filter.html.haml

 - 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

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]

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')

app/views/shared/_milestones_sort_dropdown.html.haml

 .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]

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

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')

app/views/shared/labels/_sort_dropdown.html.haml

 - 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

changelogs/unreleased/54648-fix-order-by-dropdown-tablet-screens.yml

+---
+title: Fix Order By dropdown menu styling in tablet and mobile screens
+merge_request: 23446
+author:
+type: fixed

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)

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")

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')

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)

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)

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