From 7576f09de628331ec97fd67c3ca8dfcad69fb5b2 Mon Sep 17 00:00:00 2001
From: Miguel Cabrerizo <30386061+doncicuto@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:19:19 +0200
Subject: [PATCH] fix: pat token overflow in dialog (#8131)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 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>
---
 .../show-token-dialog/show-token-dialog.component.html       | 2 +-
 .../show-token-dialog/show-token-dialog.component.scss       | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/console/src/app/modules/show-token-dialog/show-token-dialog.component.html b/console/src/app/modules/show-token-dialog/show-token-dialog.component.html
index 3748c59d66..8b5992c91a 100644
--- a/console/src/app/modules/show-token-dialog/show-token-dialog.component.html
+++ b/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>
diff --git a/console/src/app/modules/show-token-dialog/show-token-dialog.component.scss b/console/src/app/modules/show-token-dialog/show-token-dialog.component.scss
index 1dc60536ee..27c0cb1c7b 100644
--- a/console/src/app/modules/show-token-dialog/show-token-dialog.component.scss
+++ b/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;
     }