Displays all error text

src/app/api-errors/api-errors.component.html

@@ -4,14 +4,18 @@
   <button mat-icon-button (click)="dismiss($event)"><mat-icon>close</mat-icon></button>
 </div>
 <mat-list>
-  <mat-list-item *ngFor="let e of apiErrors" class="api-error">
+  <mat-list-item *ngFor="let e of apiErrors" class="api-error" [ngStyle]="{'height': 'auto'}">
     <h3 mat-line *ngIf="e.status_code">{{e.code}}</h3>
     <h4 mat-line *ngIf="e.code">{{e.status_code}}</h4>
-    <div mat-line *ngIf="e.message"><em>{{e.message}}</em></div>
     <div mat-line *ngIf="e.task_name && e.task_id">{{e.task_name}} ({{e.task_id}})</div>
     <div mat-line *ngIf="e.task_id && !e.task_name">Task ID: {{e.task_id}}</div>
     <div mat-line *ngIf="!e.task_id && e.task_name">Task Name: {{e.task_name}}</div>
     <div mat-line *ngIf="e.file_name">File: {{e.file_name}}</div>
     <div mat-line *ngIf="e.tag">Tag: {{e.tag}}</div>
+    <ng-container *ngIf="e.message">
+      <div mat-line>
+        <code *ngIf="e.message">{{e.message}}</code>
+      </div>
+    </ng-container>
   </mat-list-item>
 </mat-list>

src/app/api-errors/api-errors.component.scss

@@ -4,4 +4,13 @@
   border-left: 4px solid $brand-warning;
   background-color: $brand-warning-light;
   cursor: default;
+
+  .mat-line {
+    text-overflow: initial;
+    height: auto;
+
+    code {
+      white-space: normal;
+    }
+  }
 }