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>
This commit is contained in:
Miguel Cabrerizo 2024-06-27 11:40:00 +02:00 committed by GitHub
parent 1b0e773ceb
commit da592ccf57
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 1 deletions

View File

@ -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;

View File

@ -1,4 +1,4 @@
<h1 class="title">
<h1 mat-dialog-title class="title">
<span>{{ data.title | translate }}</span>
</h1>
<div mat-dialog-content>