Apply Dropdown Styles to various parts (#12814)

* membersModal use the new select component instead of html select

* update dropdown styles on challengeDetail (add task) and on inventory unequip

* change the width to "min-width"

website/client/src/components/inventory/equipment/index.vue

@@ -63,8 +63,6 @@
             :items="groupByItems"
             :value="groupBy"
             class="array-select"
-            :class="{disabled: disabled}"
-            :disabled="disabled"
             :right="true"
             :hide-icon="false"
             :inline-dropdown="false"

website/client/src/components/inventory/equipment/unequipDropdown.vue

@@ -1,5 +1,6 @@
 <template>
   <b-dropdown
+    class="select-list"
     right="right"
     toggle-class="with-icon"
   >
@@ -15,26 +16,31 @@
       >{{ $t('unequip') }}</span>
     </template>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipBattleGear()"
     >
       {{ $t('battleGear') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipCostume()"
     >
       {{ $t('costume') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipPetMount()"
     >
       {{ $t('petAndMount') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipBackground()"
     >
       {{ $t('background') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipAllItems()"
     >
       {{ $t('allItems') }}
@@ -100,6 +106,14 @@ export default {
 <style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
+.select-list {
+  ::v-deep {
+    .dropdown-menu {
+      min-width: 8rem; // instead of the normal 10
+    }
+  }
+}
+
 ::v-deep {
   .btn {
     display: flex;