fix: profile error messages truncated

Before the fix, when creating a new profile, if validation or other errors occurred, the informational messages at the top were truncated.

Fixes #2486

Signed-off-by: Moya Sanchez, Daniel <[email protected]>
Signed-off-by: Byron Marohn <[email protected]>
Signed-off-by: Baltodano Zamora, Jefry <[email protected]>
Signed-off-by: Vela, Mano <[email protected]>

Author: agustinfrancesa

src/app/profiles/profile-detail/profile-detail.component.html

@@ -11,9 +11,9 @@
     @if (errorMessages.length > 0) {
     <mat-list>
       @for (item of errorMessages; track item) {
-      <mat-list-item>
+      <mat-list-item class="error-messages-container">
         <mat-icon color='warn' matListItemIcon>error</mat-icon>
-        <span matListItemTitle>{{ item }}</span>
+        <span  class="error-messages" matListItemTitle>{{ item }}</span>
       </mat-list-item>
       }
     </mat-list>

src/app/profiles/profile-detail/profile-detail.component.scss

@@ -59,3 +59,12 @@ fieldset {
   font-size: 75%;
   color: rgba(0, 0, 0, 0.54);
 }
+
+.error-messages-container.mdc-list-item {
+  height: auto;
+  padding: 10px 0;
+}
+
+.error-messages{
+  white-space: break-spaces;
+}