update MultipleTagsSelect styling

src/components/formItems/MultipleTagsSelect.vue

@@ -6,8 +6,8 @@
   >
     <template v-slot="{ tags, disabled, addTag, removeTag }">
       <b-dropdown
-        :text="buttonText" size="sm"
-        variant="outline-secondary" class="d-block rounded-0"
+        :text="buttonText"
+        variant="outline-dark" class="tags-dropdown d-tb-block"
       >
         <b-dropdown-item-button
           v-for="tag in availableOptions" :key="tag"
@@ -20,7 +20,8 @@
       <ul v-if="tags.length > 0" class="list-inline d-inline-block">
         <li v-for="tag in tags" :key="tag + '-item'" class="list-inline-item">
           <b-form-tag
-            :title="tag" :disabled="disabled" pill
+            :title="tag" :disabled="disabled"
+            pill variant="dark"
             @remove="removeTag(tag)"
           >
             {{ tag }}
@@ -50,4 +51,43 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.b-form-tags {
+  border: 0;
+  padding: 0;
+  display: flex;
+
+  .tags-dropdown {
+    margin-right: .5rem;
+    margin-bottom: .25rem;
+  }
+
+  .list-inline {
+    margin: 0;
+    &-item {
+      margin-bottom: .25rem;
+    }
+  }
+
+  ::v-deep {
+    .dropdown-menu {
+      max-height: 30vh;
+      overflow-y: auto;
+      max-width: 100vw;
+    }
+
+    .b-form-tag {
+      font-size: inherit;
+      font-weight: $font-weight-bold;
+      padding-top: 0;
+      padding-bottom: 0;
+      border: $line;
+      margin-right: 0;
+    }
+
+    .b-form-tag-remove {
+      opacity: 1;
+      line-height: 0;
+    }
+  }
+}
 </style>

src/messages/fr.json

@@ -32,7 +32,8 @@
       "choices": {
         "tags": "Tags",
         "strangeness": "Degré d'étrangement"
-      }
+      },
+      "add": "Ajouter"
     },
     "search": {
       "title": "Rechercher"