From da592ccf57686b0fb22a2b5fd5befc198ffcfa32 Mon Sep 17 00:00:00 2001
From: Miguel Cabrerizo <30386061+doncicuto@users.noreply.github.com>
Date: Thu, 27 Jun 2024 11:40:00 +0200
Subject: [PATCH] fix(console): minor UI issues (#8192)

# Which Problems Are Solved

- The console has some dialog UI issues reported in #7404
- There's some horizontal scrolling in dialogs due to field errors width
overflow. In dialogs like Twilio or add flow the x-scroll show always.

![action_trigger_scroll](https://github.com/zitadel/zitadel/assets/30386061/6b574dd7-e309-4a21-a34a-6a1a98ef57ab)

![twilio_scroll](https://github.com/zitadel/zitadel/assets/30386061/48bf5af8-a8cd-4594-acf6-ef61b678443a)

- New Factor MFA title has no styles applied
![Captura desde 2024-06-25
08-37-40](https://github.com/zitadel/zitadel/assets/30386061/931419b4-7f37-4cd1-9b37-9b7fa9ff8453)

# How the Problems Are Solved

- A new style for field wrappers inside mat-dialog-component to
form-field scss that sets width to auto.
- This PR fix a missing MFA mat-dialog-title to apply styles to New
Factor title
- Issues with secret generators had been already fixed in #8141
- Issues with padding for Twilio and Actions were fixed by @peintnermax

# Additional Changes


# Additional Context

- Closes #7404

---------

Co-authored-by: Max Peintner <max@caos.ch>
---
 .../app/modules/form-field/field/form-field.component.scss    | 4 ++++
 .../dialog-add-type/dialog-add-type.component.html            | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/console/src/app/modules/form-field/field/form-field.component.scss b/console/src/app/modules/form-field/field/form-field.component.scss
index 8bed4179a..43aa7ead3 100644
--- a/console/src/app/modules/form-field/field/form-field.component.scss
+++ b/console/src/app/modules/form-field/field/form-field.component.scss
@@ -53,6 +53,10 @@
     overflow: hidden; // prevents multi-line errors from overlapping the control
   }
 
+  mat-dialog-container .cnsl-form-field-subscript-wrapper {
+    width: auto;
+  }
+
   .cnsl-form-field-hint-wrapper,
   .cnsl-form-field-error-wrapper {
     display: flex;
diff --git a/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.html b/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.html
index c62e5f37d..fedbbe3b8 100644
--- a/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.html
+++ b/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.html
@@ -1,4 +1,4 @@
-<h1 class="title">
+<h1 mat-dialog-title class="title">
   <span>{{ data.title | translate }}</span>
 </h1>
 <div mat-dialog-content>