From 8cd45476ac9a52bf300e5d1c5c54441a65d151c6 Mon Sep 17 00:00:00 2001
From: Tom Moulard <tom.moulard@traefik.io>
Date: Thu, 13 Jan 2022 18:38:06 +0100
Subject: [PATCH] Fix middleware regexp's display

---
 .../src/components/_commons/PanelMiddlewares.vue  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/webui/src/components/_commons/PanelMiddlewares.vue b/webui/src/components/_commons/PanelMiddlewares.vue
index 17de1d43e..791e69479 100644
--- a/webui/src/components/_commons/PanelMiddlewares.vue
+++ b/webui/src/components/_commons/PanelMiddlewares.vue
@@ -937,8 +937,9 @@
                 <div class="text-subtitle2">Regex</div>
                 <q-chip
                   dense
-                  class="app-chip app-chip-green">
+                  class="app-chip app-chip-green app-chip-overflow">
                   {{ exData(middleware).regex }}
+                  <q-tooltip>{{ exData(middleware).regex }}</q-tooltip>
                 </q-chip>
               </div>
             </div>
@@ -950,8 +951,9 @@
                 <div class="text-subtitle2">Replacement</div>
                 <q-chip
                   dense
-                  class="app-chip app-chip-green">
+                  class="app-chip app-chip-green app-chip-overflow">
                   {{ exData(middleware).replacement }}
+                  <q-tooltip>{{ exData(middleware).replacement }}</q-tooltip>
                 </q-chip>
               </div>
             </div>
@@ -1001,8 +1003,9 @@
                 <div class="text-subtitle2">Regex</div>
                 <q-chip
                   dense
-                  class="app-chip app-chip-green">
+                  class="app-chip app-chip-green app-chip-overflow">
                   {{ exData(middleware).regex }}
+                  <q-tooltip>{{ exData(middleware).regex }}</q-tooltip>
                 </q-chip>
               </div>
             </div>
@@ -1014,8 +1017,9 @@
                 <div class="text-subtitle2">Replacement</div>
                 <q-chip
                   dense
-                  class="app-chip app-chip-green">
+                  class="app-chip app-chip-green app-chip-overflow">
                   {{ exData(middleware).replacement }}
+                  <q-tooltip>{{ exData(middleware).replacement }}</q-tooltip>
                 </q-chip>
               </div>
             </div>
@@ -1058,8 +1062,9 @@
                 <q-chip
                   v-for="(exp, key) in exData(middleware).regex" :key="key"
                   dense
-                  class="app-chip app-chip-green">
+                  class="app-chip app-chip-green app-chip-overflow">
                   {{ exp }}
+                  <q-tooltip>{{ exp }}</q-tooltip>
                 </q-chip>
               </div>
             </div>