Merge branch 'kp-fix-epics-filter-search-styles' into 'master'

Fix Epics filter search bar dropdown alignment

See merge request gitlab-org/gitlab-ee!14857

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

+@include media-breakpoint-down(sm) {
+  .epics-other-filters .filter-dropdown-container {
+    .epics-sort-btn i {
+      position: absolute;
+      top: 11px;
+      right: 6px;
+    }
+
+    .btn-sort-direction {
+      flex: 0 1 auto;
+    }
+  }
+}
+
 .epic-sidebar {
   .block.date {
     .help-icon,

ee/app/views/shared/epic/_search_bar.html.haml

@@ -8,7 +8,7 @@
 - is_weeks = preset_layout == "WEEKS"
 
 .epics-filters{ class: "#{'epics-roadmap-filters' if show_roadmap_presets}" }
-  .d-flex.epics-details-filters.filtered-search-block.row-content-block.second-block
+  .epics-details-filters.filtered-search-block.d-flex.flex-column.flex-md-row.row-content-block.second-block
     - if show_roadmap_presets
       .btn-group.btn-group-toggle.append-right-default.js-btn-roadmap-presets{ data: { toggle: 'buttons' } }
         %label.btn.btn-default.btn-roadmap-preset{ class: ("active" if is_quarters) }
@@ -25,7 +25,7 @@
     = form_tag page_filter_path, method: :get, class: 'flex-fill filter-form js-filter-form' do
       - if params[:search].present?
         = hidden_field_tag :search, params[:search]
-      .epics-other-filters.filtered-search-wrapper
+      .epics-other-filters.filtered-search-wrapper.d-flex.flex-column.flex-md-row
         .filtered-search-box
           = dropdown_tag(custom_icon('icon_history'),
             options: { wrapper_class: "filtered-search-history-dropdown-wrapper",

ee/app/views/shared/epic/_sort_dropdown.html.haml

 - hide_extra_sort_options = local_assigns.fetch(:hide_extra_sort_options, false)
 - sorted_by = epics_sort_options_hash[@sort]
 
-.dropdown.inline.prepend-left-10
-  .btn-group
-    %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+.dropdown.prepend-left-10
+  .btn-group.d-flex.d-md-inline-flex
+    %button.btn.dropdown-toggle.epics-sort-btn{ type: 'button', data: { toggle: 'dropdown' } }
       = sorted_by
       = icon('chevron-down')
     %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort

ee/changelogs/unreleased/kp-fix-epics-filter-search-styles.yml

+---
+title: Fix the Epics filter bar alignment
+merge_request: 14857
+author:
+type: fixed