From 92d32e7cf8ca815d6a2eaafc93aa5ae653cf750c Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 22 Feb 2022 18:07:18 +0200
Subject: [PATCH] Fixed tag layout in effect viewer for many tags overlapping
 one another

---
 .../ui/properties/viewers/EffectViewer.vue    | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/imports/ui/properties/viewers/EffectViewer.vue b/app/imports/ui/properties/viewers/EffectViewer.vue
index dadcde7f..772a02fd 100644
--- a/app/imports/ui/properties/viewers/EffectViewer.vue
+++ b/app/imports/ui/properties/viewers/EffectViewer.vue
@@ -24,13 +24,15 @@
         name="Targeted tags"
       >
         <div>
-          <v-chip
-            v-for="(tag, index) in model.targetTags"
-            :key="index"
-            class="ma-1"
-          >
-            {{ tag }}
-          </v-chip>
+          <div class="d-flex flex-wrap">
+            <v-chip
+              v-for="(tag, index) in model.targetTags"
+              :key="index"
+              class="ma-1"
+            >
+              {{ tag }}
+            </v-chip>
+          </div>
           <div
             v-for="ex in model.extraTags"
             :key="ex._id"
@@ -38,13 +40,15 @@
             <span class="ma-2">
               {{ ex.operation }}
             </span>
-            <v-chip
-              v-for="(extraTag, index) in ex.tags"
-              :key="index"
-              class="ma-1"
-            >
-              {{ extraTag }}
-            </v-chip>
+            <div class="d-flex flex-wrap">
+              <v-chip
+                v-for="(extraTag, index) in ex.tags"
+                :key="index"
+                class="ma-1"
+              >
+                {{ extraTag }}
+              </v-chip>
+            </div>
           </div>
         </div>
       </property-field>
@@ -52,13 +56,15 @@
         v-else
         name="Stats"
       >
-        <v-chip
-          v-for="(stat, index) in model.stats"
-          :key="index"
-          class="ma-1"
-        >
-          {{ stat }}
-        </v-chip>
+        <div class="d-flex flex-wrap">
+          <v-chip
+            v-for="(stat, index) in model.stats"
+            :key="index"
+            class="ma-1"
+          >
+            {{ stat }}
+          </v-chip>
+        </div>
       </property-field>
       <property-field
         v-if="model.operation === 'conditional'"