Repository: traefik/traefik (language: go)

Issue:
Long regexes doesn't show
<!-- PLEASE FOLLOW THE ISSUE TEMPLATE TO HELP TRIAGE AND SUPPORT! -->

### Do you want to request a *feature* or report a *bug*?

<!--
DO NOT FILE ISSUES FOR GENERAL SUPPORT QUESTIONS.

The issue tracker is for reporting bugs and feature requests only.
For end-user related support questions, please refer to one of the following:

- the Traefik community forum: https://community.containo.us/

-->

Bug

<!--

The configurations between 1.X and 2.X are NOT compatible.
Please have a look here https://docs.traefik.io/v2.0/getting-started/configuration-overview/.

-->

### What did you do?

<!--

HOW TO WRITE A GOOD BUG REPORT?

- Respect the issue template as much as possible.
- The title should be short and descriptive.
- Explain the conditions which led you to report this issue: the context.
- The context should lead to something, an idea or a problem that you’re facing.
- Remain clear and concise.
- Format your messages to help the reader focus on what matters and understand the structure of your message, use Markdown syntax https://help.github.com/articles/github-flavored-markdown

-->

Use a long regex to mimic a negative lookahead inside a middleware.

### What did you expect to see?

The full regex should be visible

### What did you see instead?

Text is just 1 line and full regex doesn't appear

https://i.imgur.com/PTF0gBG.png

### Output of `traefik version`: (_What version of Traefik are you using?_)

<!--
`latest` is not considered as a valid version.

For the Traefik Docker image:
    docker run [IMAGE] version
    ex: docker run traefik version

-->

Version:      2.2.1
Codename:     chevrotin
Go version:   go1.14.2
Built:        2020-04-29T18:02:09Z
OS/Arch:      linux/amd64

### What is your environment & configuration (arguments, toml, provider, platform, ...)?

Not needed

<!--
Add more configuration information here.
-->


### If applicable, please paste the log output in DEBUG level (`--log.level=DEBUG` switch)

Not needed



Discussion / hints:
Hi @felixsanz !
I'm going to fix this bug.
What do you think would be more appropriate, scroll bar or line break?
I'm thinking about ellipsis and tooltip.
The code responsible for the display is located here - [PanelMiddlewares.vue](https://github.com/traefik/traefik/blob/master/webui/src/components/_commons/PanelMiddlewares.vuel)

I got something like that.
But I can't get rid of the inline styles.
```
<!-- EXTRA FIELDS FROM MIDDLEWARES - [redirectRegex] - replacement -->
        <q-card-section v-if="middleware.redirectRegex">
          <div class="row items-start no-wrap">
            <div class="col">
              <div class="text-subtitle2">Replacement</div>
              <q-chip
                dense
                class="app-chip app-chip-green">
                <div style="overflow: hidden; text-overflow: ellipsis; width: 100%;">
                  {{ exData(middleware).replacement }}
                </div>
                <q-tooltip max-width="90vw" content-style="overflow-wrap: break-word;">
                  {{ exData(middleware).replacement }}
                </q-tooltip>
              </q-chip>
            </div>
          </div>
        </q-card-section>

/\/\/\/\/\/\/\

    .app-chip {
      max-width: 100%;
      &-error {
        display: flex;
        height: 100%;
        flex-wrap: wrap;
        border-width: 0;
        margin-bottom: 8px;
      }
      /deep/ .q-chip__content{
        white-space: normal;
        max-width: inherit;
      }
    }
```

Fix patch:
diff --git a/webui/src/components/_commons/PanelMiddlewares.vue b/webui/src/components/_commons/PanelMiddlewares.vue
index 17de1d43ef..791e694793 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>


Test patch: