feat: Update the design for dropdown buttons (#5625)

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -41,9 +41,18 @@
       :class="{ 'dropdown-pane--open': showSearchDropdown }"
       class="dropdown-pane"
     >
-      <h4 class="text-block-title text-truncate">
-        {{ multiselectorTitle }}
-      </h4>
+      <div class="dropdown__header">
+        <h4 class="text-block-title text-truncate">
+          {{ multiselectorTitle }}
+        </h4>
+        <woot-button
+          icon="dismiss"
+          size="tiny"
+          color-scheme="secondary"
+          variant="clear"
+          @click="onCloseDropdown"
+        />
+      </div>
       <multiselect-dropdown-items
         v-if="showSearchDropdown"
         :options="options"
@@ -172,4 +181,15 @@ export default {
     width: 100%;
   }
 }
+
+.dropdown__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-smaller);
+
+  .text-block-title {
+    margin: 0;
+  }
+}
 </style>