chore: Add multiselect support in stories (#2427)

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -137,6 +137,7 @@
 }
 
 .sidebar-labels-wrap {
+
   &.has-edited,
   &:hover {
     .multiselect {
@@ -162,6 +163,12 @@
 .multiselect-wrap--small {
   $multiselect-height: 3.8rem;
 
+  .multiselect__tags,
+  .multiselect__input {
+    align-items: center;
+    display: flex;
+  }
+
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
@@ -177,15 +184,24 @@
   }
 
   .multiselect__single {
+    align-items: center;
+    display: flex;
     font-size: var(--font-size-small);
-    padding: var(--space-small) 0;
+    margin: 0;
+    padding: var(--space-smaller) var(--space-micro);
   }
 
   .multiselect__placeholder {
-    padding: var(--space-small) 0;
+    margin: 0;
+    padding: var(--space-smaller) var(--space-micro);
   }
 
   .multiselect__select {
     min-height: $multiselect-height;
   }
+
+  .multiselect--disabled .multiselect__current,
+  .multiselect--disabled .multiselect__select {
+    background: transparent;
+  }
 }

app/javascript/dashboard/assets/scss/storybook.scss

@@ -8,6 +8,7 @@
 @import 'variables';
 
 @import '~spinkit/scss/spinners/7-three-bounce';
+@import '~vue-multiselect/dist/vue-multiselect.min.css';
 @import '~shared/assets/stylesheets/ionicons';
 
 @import 'mixins';
@@ -27,3 +28,5 @@
 @import 'foundation-custom';
 @import 'widgets/buttons';
 @import 'widgets/forms';
+
+@import 'plugins/multiselect';