From a8ebf6a1de5f8bffd48c0e1bdd6b9e0197db4436 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sat, 5 Mar 2022 17:48:52 +0200
Subject: [PATCH] Tags now wrap in damage multiplier viewer

---
 .../ui/properties/viewers/DamageMultiplierViewer.vue | 12 ++++++------
 .../ui/properties/viewers/shared/PropertyField.vue   |  5 ++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/imports/ui/properties/viewers/DamageMultiplierViewer.vue b/app/imports/ui/properties/viewers/DamageMultiplierViewer.vue
index 79a31b77..acb7981b 100644
--- a/app/imports/ui/properties/viewers/DamageMultiplierViewer.vue
+++ b/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
diff --git a/app/imports/ui/properties/viewers/shared/PropertyField.vue b/app/imports/ui/properties/viewers/shared/PropertyField.vue
index 6047149a..4ec09bba 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyField.vue
+++ b/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}),