Tidied up dropdown titles so they line up properly

- Alert management
- Sidebar
_ Batch comments

app/assets/javascripts/alert_management/components/alert_status.vue

@@ -101,12 +101,12 @@ export default {
       @keydown.esc.native="$emit('hide-dropdown')"
       @hide="$emit('hide-dropdown')"
     >
-      <div v-if="isSidebar" class="dropdown-title text-center">
-        <span class="alert-title">{{ s__('AlertManagement|Assign status') }}</span>
+      <div v-if="isSidebar" class="dropdown-title gl-display-flex">
+        <span class="alert-title gl-ml-auto">{{ s__('AlertManagement|Assign status') }}</span>
         <gl-button
           :aria-label="__('Close')"
           variant="link"
-          class="dropdown-title-button dropdown-menu-close"
+          class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-black-normal!"
           icon="close"
           @click="$emit('hide-dropdown')"
         />

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue

@@ -225,12 +225,12 @@ export default {
           @keydown.esc.native="hideDropdown"
           @hide="hideDropdown"
         >
-          <div class="dropdown-title">
-            <span class="alert-title">{{ __('Assign To') }}</span>
+          <div class="dropdown-title gl-display-flex">
+            <span class="alert-title gl-ml-auto">{{ __('Assign To') }}</span>
             <gl-button
               :aria-label="__('Close')"
               variant="link"
-              class="dropdown-title-button dropdown-menu-close"
+              class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-black-normal!"
               icon="close"
               @click="hideDropdown"
             />

app/assets/javascripts/batch_comments/components/preview_dropdown.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlLoadingIcon, GlButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { sprintf, n__ } from '~/locale';
 import DraftsCount from './drafts_count.vue';
 import PublishButton from './publish_button.vue';
@@ -8,8 +8,8 @@ import PreviewItem from './preview_item.vue';
 
 export default {
   components: {
-    GlLoadingIcon,
     GlButton,
+    GlLoadingIcon,
     GlIcon,
     DraftsCount,
     PublishButton,
@@ -81,16 +81,17 @@ export default {
         show: showPreviewDropdown,
       }"
     >
-      <div class="dropdown-title">
-        {{ dropdownTitle }}
-        <button
+      <div class="dropdown-title gl-display-flex gl-align-items-center">
+        <span class="gl-ml-auto">{{ dropdownTitle }}</span>
+        <gl-button
           :aria-label="__('Close')"
           type="button"
-          class="dropdown-title-button dropdown-menu-close"
+          category="tertiary"
+          size="small"
+          class="dropdown-title-button gl-ml-auto gl-p-0!"
+          icon="close"
           @click="toggleReviewDropdown"
-        >
-          <gl-icon name="close" />
-        </button>
+        />
       </div>
       <div class="dropdown-content">
         <ul v-if="isNotesFetched">

app/helpers/dropdowns_helper.rb

@@ -65,17 +65,20 @@ module DropdownsHelper
     has_back = options.fetch(:back, false)
     has_close = options.fetch(:close, true)
 
-    container_class = 'dropdown-title gl-display-flex'
-    margin_class = ''
+    container_class = %w[dropdown-title gl-display-flex]
+    margin_class = []
 
     if has_back && has_close
-      container_class += ' gl-justify-content-space-between'
+      container_class << 'gl-justify-content-space-between'
     elsif has_back
-      margin_class = ' gl-mr-auto'
+      margin_class << 'gl-mr-auto'
     elsif has_close
-      margin_class = ' gl-ml-auto'
+      margin_class << ' gl-ml-auto'
     end
 
+    container_class = container_class.join(' ')
+    margin_class = margin_class.join(' ')
+
     content_tag :div, class: container_class do
       title_output = []
 

ee/app/assets/javascripts/sidebar/components/status/health_status_dropdown.vue

@@ -93,12 +93,12 @@ export default {
       @keydown.esc.native="hideDropdown"
       @hide="hideDropdown"
     >
-      <div class="dropdown-title">
-        <span class="health-title">{{ s__('Sidebar|Assign health status') }}</span>
+      <div class="dropdown-title gl-display-flex">
+        <span class="health-title gl-ml-auto">{{ s__('Sidebar|Assign health status') }}</span>
         <gl-button
           :aria-label="__('Close')"
           variant="link"
-          class="dropdown-title-button dropdown-menu-close"
+          class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-gray-200!"
           icon="close"
           @click="hideDropdown"
         />

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -173,12 +173,12 @@ export default {
           @keydown.esc.native="hideDropdown"
           @hide="hideDropdown"
         >
-          <div class="dropdown-title">
-            <span class="health-title">{{ s__('Sidebar|Assign health status') }}</span>
+          <div class="dropdown-title gl-display-flex">
+            <span class="health-title gl-ml-auto">{{ s__('Sidebar|Assign health status') }}</span>
             <gl-button
               :aria-label="__('Close')"
               variant="link"
-              class="dropdown-title-button dropdown-menu-close"
+              class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-gray-200!"
               icon="close"
               @click="hideDropdown"
             />