From 6a3689e05a3b2b3f6933a2a800ea067b36c59d64 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Thu, 21 Jul 2022 11:15:35 +0200
Subject: [PATCH] fix(console): username overflow when suffix is shown (#4007)

* fix(console): username overflow when suffix

* rm logs
---
 .../src/app/modules/form-field/form-field.component.scss  | 8 ++++++--
 .../pages/users/user-create/user-create.component.scss    | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/console/src/app/modules/form-field/form-field.component.scss b/console/src/app/modules/form-field/form-field.component.scss
index c27b21a59b..c91924a894 100644
--- a/console/src/app/modules/form-field/form-field.component.scss
+++ b/console/src/app/modules/form-field/form-field.component.scss
@@ -9,7 +9,7 @@
   .ng-untouched {
     .cnsl-error {
       visibility: hidden;
-      transition: visibility .2 ease;
+      transition: visibility 0.2 ease;
     }
   }
 
@@ -24,10 +24,14 @@
 
   [cnslSuffix] {
     position: absolute;
-    right: .5rem;
+    right: 0.5rem;
     top: 9px;
     height: inherit;
     vertical-align: middle;
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   input {
diff --git a/console/src/app/pages/users/user-create/user-create.component.scss b/console/src/app/pages/users/user-create/user-create.component.scss
index 5cbf979da4..2610b6db2a 100644
--- a/console/src/app/pages/users/user-create/user-create.component.scss
+++ b/console/src/app/pages/users/user-create/user-create.component.scss
@@ -1,5 +1,5 @@
 .user-create-main-content {
-  max-width: 35rem;
+  max-width: 45rem;
 
   @media only screen and (max-width: 500px) {
     padding: 0 0.5rem;