Inventory: fixes / layout (#11948)

Co-authored-by: Sabe Jones <sabrecat@gmail.com>

website/client/src/components/ui/selectList.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <b-dropdown
-      class="inline-dropdown"
+      class="select-list"
+      :class="{'inline-dropdown':inlineDropdown}"
       :toggle-class="isOpened ? 'active' : null"
       :disabled="disabled"
+      :right="right"
       @show="isOpened = true"
       @hide="isOpened = false"
     >
@@ -21,7 +23,12 @@
         v-for="item in items"
         :key="keyProp ? item[keyProp] : item"
         :disabled="typeof item[disabledProp] === 'undefined' ? false : item[disabledProp]"
-        :class="{active: item === selected, selectListItem: true}"
+        :active="item === selected"
+        :class="{
+          active: item === selected,
+          selectListItem: true,
+          showIcon: !hideIcon && item === selected
+        }"
         @click="selectItem(item)"
       >
         <slot
@@ -32,6 +39,12 @@
           <!-- Fallback content -->
           {{ item }}
         </slot>
+
+        <div
+          v-once
+          class="svg-icon color check-icon"
+          v-html="icons.check"
+        ></div>
       </b-dropdown-item>
     </b-dropdown>
   </div>
@@ -40,9 +53,30 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  .select-list ::v-deep .selectListItem {
+    position: relative;
+
+    &:not(.showIcon) {
+      .svg-icon.check-icon {
+        display: none;
+      }
+    }
+
+    .svg-icon.check-icon.color {
+      position: absolute;
+      right: 0.855rem;
+      top: 0.688rem;
+      bottom: 0.688rem;
+      width: 0.77rem;
+      height: 0.615rem;
+      color: $purple-300;
+    }
+  }
 </style>
 
 <script>
+import svgCheck from '@/assets/svg/check.svg';
+
 export default {
   props: {
     items: {
@@ -58,11 +92,24 @@ export default {
     disabledProp: {
       type: String,
     },
+    hideIcon: {
+      type: Boolean,
+    },
+    right: {
+      type: Boolean,
+    },
+    inlineDropdown: {
+      type: Boolean,
+      default: true,
+    },
   },
   data () {
     return {
       isOpened: false,
       selected: this.value,
+      icons: Object.freeze({
+        check: svgCheck,
+      }),
     };
   },
   methods: {