fix: pat token overflow in dialog (#8131)

# Which Problems Are Solved

@mffap reported in issue #8084 that there was an oferflow error when the
PAT token was displayed which made copying it almost impossible

# How the Problems Are Solved

It seems there was an issue with the token text not wrapping well as the
token is a long word. Sometimes the token was displayed well but it was
only because the token contains hyphens that made the text go into a new
line but if no hyphen was there there was an overflow issue.

I've used a new class for the token to be displayed and used the css
properties explained in
[mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text)

```
overflow-wrap: break-word;
word-break: break-all;

```

Here's a video showing the fix in action:


https://github.com/zitadel/zitadel/assets/30386061/096de18d-4424-46b8-a287-cce6539c2053

# Additional Context

- Closes #8084

Co-authored-by: Tim Möhlmann <tim+github@zitadel.com>

console/src/app/modules/show-token-dialog/show-token-dialog.component.html

@@ -25,7 +25,7 @@
           <i *ngIf="copied !== tokenResponse.token" class="las la-clipboard"></i>
           <i *ngIf="copied === tokenResponse.token" class="las la-clipboard-check"></i>
         </button>
-        <span>{{ tokenResponse.token }}</span>
+        <span class="token">{{ tokenResponse.token }}</span>
       </div>
     </div>
   </ng-container>

console/src/app/modules/show-token-dialog/show-token-dialog.component.scss

@@ -40,6 +40,11 @@
     display: flex;
     align-items: center;
 
+    .token {
+      overflow-wrap: break-word;
+      word-break: break-all;
+    }
+
     .ctc {
       margin-right: 1rem;
     }