better looks for the file report

src/app/workspace-admin/files/files.component.css

@@ -73,11 +73,17 @@
   display: block;
   position: absolute;
   background: white;
-  padding: 4px;
-  border-radius: 5px;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   z-index: 1000;
-  max-height: 30em;
-  overflow-y: auto
+  cursor: default;
+}
+
+.full-file-report .mat-card-title,
+.full-file-report .mat-card-subtitle {
+  margin-left: -16px;
 }
 
+.full-file-report mat-card-content {
+  max-height: 15em;
+  overflow-y: auto
+}

src/app/workspace-admin/files/files.component.html

@@ -26,18 +26,22 @@
                 <mat-icon class="report-{{level}}">{{level}}</mat-icon>
               </ng-container>
             </div>
-            <div class="full-file-report">
-              <table>
-                <ng-container *ngFor="let info of element.info | keyvalue">
-                  <tr *ngIf="info.value"><td>{{info.key}}</td><td>{{info.value}}</td></tr>
+            <mat-card class="full-file-report">
+              <mat-card-header *ngIf="element.info.label || element.info.id">
+                <mat-card-title>
+                  {{element.info.label || '#' + element.info.id}}
+                  <span *ngIf="element.info.label && element.info.id" style="color:silver">#{{element.info.id}}</span>
+                </mat-card-title>
+                <mat-card-subtitle>{{element.info.description}}</mat-card-subtitle>
+              </mat-card-header>
+              <mat-card-content>
+                <ng-container *ngFor="let level of ['error', 'warning', 'info']">
+                  <div *ngFor="let message of element.report[level]">
+                    <alert [level]="level" [text]="message"></alert>
+                  </div>
                 </ng-container>
-              </table>
-              <ng-container *ngFor="let level of ['error', 'warning', 'info']">
-                <div *ngFor="let message of element.report[level]">
-                  <alert [level]="level" [text]="message"></alert>
-                </div>
-              </ng-container>
-            </div>
+              </mat-card-content>
+            </mat-card>
           </div>
         </mat-cell>
       </ng-container>