Fix recent searches icon alignment in Safari

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/30642

app/assets/stylesheets/framework/filters.scss

@@ -246,7 +246,15 @@
   }
 }
+.filtered-search-history-dropdown-wrapper {
+  position: initial;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .filtered-search-history-dropdown-toggle-button {
+  flex: 1;
   display: flex;
   align-items: center;
   width: auto;
@@ -264,6 +272,7 @@
   border-right: 1px solid $border-color;
   color: $gl-text-color-secondary;
+  line-height: 1;
   transition: color 0.1s linear;
@@ -275,6 +284,8 @@
   }
   .dropdown-toggle-text {
+    display: inline-block;
+    vertical-align: middle;
     color: inherit;
     .fa {
@@ -284,15 +295,11 @@
   .fa {
     position: initial;
+    vertical-align: middle;
   }
 }
-.filtered-search-history-dropdown-wrapper {
-  position: initial;
-  flex-shrink: 0;
-}
-
 .filtered-search-history-dropdown {
   width: 40%;

app/helpers/dropdowns_helper.rb

@@ -42,7 +42,11 @@ module DropdownsHelper
   def dropdown_toggle(toggle_text, data_attr, options = {})
     default_label = data_attr[:default_label]
     content_tag(:button, class: "dropdown-menu-toggle #{options[:toggle_class] if options.has_key?(:toggle_class)}", id: (options[:id] if options.has_key?(:id)), type: "button", data: data_attr) do
-      output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}")
+      output = if options[:disable_text_wrapper]
+                 toggle_text
+               else
+                 content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}")
+               end
       output << icon('chevron-down')
       output.html_safe
     end

app/views/shared/issuable/_search_bar.html.haml

@@ -12,8 +12,9 @@
             class: "check_all_issues left"
       .issues-other-filters.filtered-search-wrapper
         .filtered-search-box
-          = dropdown_tag(content_tag(:i, '', class: 'fa fa-history'),
-            options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
+          = dropdown_tag(content_tag(:i, '', class: 'dropdown-toggle-text fa fa-history'),
+            options: { disable_text_wrapper: true,
+            wrapper_class: "filtered-search-history-dropdown-wrapper",
             toggle_class: "filtered-search-history-dropdown-toggle-button",
             dropdown_class: "filtered-search-history-dropdown",
             content_class: "filtered-search-history-dropdown-content",