fix(login): chrome prefill, org register suffix offset, loginname overflow (#1292)

* fix: calculate offset, fix prefill

* fix loginname, displayname overflow

internal/ui/login/static/resources/scripts/form_submit.js

@@ -6,6 +6,8 @@ function disableSubmit(checks, button) {
     }
     addRequiredEventListener(inputs, checks, form, button);
     disableDoubleSubmit(form, button);
+
+    toggleButton(checks, form, inputs, button);
 }
 
 function addRequiredEventListener(inputs, checks, form, button) {

internal/ui/login/static/resources/scripts/loginname_suffix.js

@@ -10,6 +10,8 @@ function RenderDefaultLoginnameSuffix() {
     } else {
         defaultLoginNameSuffix.innerText = "";
     }
+
+    offsetLabel();
 }
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -19,3 +21,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
 document.getElementById("orgname").addEventListener('input', function () {
     RenderDefaultLoginnameSuffix();
 });
+
+function offsetLabel() {
+    const suffix = document.getElementById('default-login-suffix');
+    const suffixInput = document.getElementsByClassName('lgn-suffix-input')[0];
+
+    calculateOffset();
+    suffix.addEventListener("DOMCharacterDataModified", calculateOffset);
+
+    function calculateOffset() {
+        // add suffix width to inner right padding of the input field
+        if (suffix && suffixInput) {
+            suffixInput.style.paddingRight = `${(suffix.offsetWidth ?? 0) + 10}px`;
+        }
+    }
+}

internal/ui/login/static/resources/themes/scss/styles/account_selection/account_selection.scss

@@ -21,16 +21,21 @@ $lgn-container-margin: 0px auto 50px auto;
             display: block;
             margin: .5rem; 
             text-align: start;
+            overflow: hidden;
 
             .lgn-displayname{
                 font-size: 16px;
                 margin: .5rem 0;
                 margin-bottom: 0;
+                text-overflow: ellipsis;
+                overflow: hidden;
             }
 
             .lgn-loginname{
                 font-size: 14px;
                 margin: 0;
+                text-overflow: ellipsis;
+                overflow: hidden;
             }
 
             .lgn-session-state {

internal/ui/login/static/resources/themes/zitadel/css/bundle.css

@@ -448,15 +448,20 @@ i {
   display: block;
   margin: 0.5rem;
   text-align: start;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-displayname {
   font-size: 16px;
   margin: 0.5rem 0;
   margin-bottom: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-loginname {
   font-size: 14px;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
   margin: 0;
@@ -1301,15 +1306,20 @@ i {
   display: block;
   margin: 0.5rem;
   text-align: start;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-displayname {
   font-size: 16px;
   margin: 0.5rem 0;
   margin-bottom: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-loginname {
   font-size: 14px;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
   margin: 0;

internal/ui/login/static/resources/themes/zitadel/css/zitadel.css

@@ -448,15 +448,20 @@ i {
   display: block;
   margin: 0.5rem;
   text-align: start;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-displayname {
   font-size: 16px;
   margin: 0.5rem 0;
   margin-bottom: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-loginname {
   font-size: 14px;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
   margin: 0;