Fix sort dropdown layout for mobile screens

ee/app/assets/stylesheets/pages/roadmap.scss

@@ -33,20 +33,24 @@ $column-right-gradient: linear-gradient(
       border-bottom-right-radius: 0;
     }
 
-    .dropdown-toggle-split {
-      padding-top: $gl-btn-vert-padding;
-      border: 1px solid $border-color;
+    .btn-sort-direction {
       border-left: 0;
-      border-top-right-radius: $border-radius-base;
-      border-bottom-right-radius: $border-radius-base;
-      background-color: $white-light;
-      color: $gl-text-color-secondary;
 
       &:hover {
-        color: $gl-text-color;
         border-color: $gray-darkest;
       }
     }
+
+    @include media-breakpoint-down(xs) {
+      display: flex;
+
+      .dropdown-toggle .fa-chevron-down {
+        position: relative;
+        top: 5px;
+        right: 0;
+        float: right;
+      }
+    }
   }
 }
 

ee/app/helpers/ee/sorting_helper.rb

@@ -48,8 +48,8 @@ module EE
 
       link_to sprite_icon(sort_icon, size: 16),
               page_filter_path(sort: opposite_sorting_param, label: true),
-              class: "dropdown-toggle-split btn-sort-direction",
-              title: sort.end_with?('desc') ? _("Descending") : _("Ascending")
+              class: "btn btn-default has-tooltip qa-reverse-sort btn-sort-direction",
+              title: _("Sort direction")
     end
 
     def sort_title_start_date