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 --- .../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 @@ - {{ tokenResponse.token }} + {{ tokenResponse.token }} 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; }