Tags now wrap in damage multiplier viewer

app/imports/ui/properties/viewers/DamageMultiplierViewer.vue

@@ -7,12 +7,12 @@
       />
       <property-field
         name="Damage types"
+        wrap
       >
         <v-chip
           v-for="(damageType, index) in model.damageTypes"
           :key="index"
-          class="my-1 mr-1"
-          style="cursor: pointer"
+          class="mt-1 mr-1"
           :input-value="true"
           outlined
           small
@@ -24,12 +24,12 @@
       <property-field
         v-if="model.includeTags && model.includeTags.length"
         name="Damage tags required"
+        wrap
       >
         <v-chip
           v-for="(damageType, index) in model.includeTags"
           :key="index"
-          class="ma-1"
-          style="cursor: pointer"
+          class="mt-1 mr-1"
           :input-value="true"
           small
           outlined
@@ -40,12 +40,12 @@
       <property-field
         v-if="model.excludeTags && model.excludeTags.length"
         name="Damage tags excluded"
+        wrap
       >
         <v-chip
           v-for="(damageType, index) in model.excludeTags"
           :key="index"
-          class="ma-1"
-          style="cursor: pointer"
+          class="mt-1 mr-1"
           :input-value="true"
           small
           outlined

app/imports/ui/properties/viewers/shared/PropertyField.vue

@@ -23,15 +23,17 @@
         style="width: 100%;"
       >
         <div
-          class="layout align-center"
+          class="d-flex align-center"
           :class="{
             'text-body-1': !isLarge,
             'text-h4': isLarge,
             'justify-center': isCenter,
             'justify-end': end,
+            'flex-wrap': wrap,
             'mono': isMono,
             'flex-grow-0': calculation && calculation.effects,
             'ma-3': calculation && calculation.effects,
+            ...$attrs.class,
           }"
           style="overflow-x: auto;"
           v-bind="$attrs"
@@ -98,6 +100,7 @@ export default {
     large: Boolean,
     mono: Boolean,
     signed: Boolean,
+    wrap: Boolean,
     cols: {
       type: Object,
       default: () => ({cols: 12, sm: 6, md: 4}),