style: fix display cart when archive title is long

src/app/components/dialogs/cart/cart.dialog.html

 <lib-empty-container cdkTrapFocus
                      [solidifyFocusFirstElement]="true"
- >
-<h1 mat-dialog-title>{{'app.cart.title' | translate}}</h1>
-<div mat-dialog-content
-     [dlcmSpinner]="isLoadingArchiveObs | async"
 >
-  <ng-container *ngIf="(listArchiveObs | async) && (listArchiveObs | async).length > 0; else emptyCart">
-    <mat-list class="list">
-      <mat-list-item *ngFor="let archive of (listArchiveObs | async)">
-        {{metadataUtil.getTitle(searchScopeEnum.public, archive.metadata)}}
-        <div>
-          {{metadataUtil.getSize(archive.metadata) | filesize}}
-          <button mat-icon-button
-                  mat-button
-                  class="trash"
-                  [matTooltip]="'app.cart.button.placeholder.remove' | translate"
-                  [matTooltipPosition]="'right'"
-                  solidifyShortCuts
-                  (onEnter)="remove(archive.resId)"
-                  (click)="remove(archive.resId)"
+  <h1 mat-dialog-title>{{'app.cart.title' | translate}}</h1>
+  <div mat-dialog-content
+       [dlcmSpinner]="isLoadingArchiveObs | async"
+  >
+    <ng-container *ngIf="(listArchiveObs | async) && (listArchiveObs | async).length > 0; else emptyCart">
+      <mat-list class="list">
+        <mat-list-item *ngFor="let archive of (listArchiveObs | async)">
+          <div *ngIf="metadataUtil.getTitle(searchScopeEnum.public, archive.metadata) as title"
+               class="label"
+               [matTooltip]="title"
           >
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
-      </mat-list-item>
-    </mat-list>
-  </ng-container>
+            {{title}}
+          </div>
+          <div class="size-and-delete">
+            {{metadataUtil.getSize(archive.metadata) | filesize}}
+            <button mat-icon-button
+                    mat-button
+                    class="trash"
+                    [matTooltip]="'app.cart.button.placeholder.remove' | translate"
+                    [matTooltipPosition]="'right'"
+                    solidifyShortCuts
+                    (onEnter)="remove(archive.resId)"
+                    (click)="remove(archive.resId)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </mat-list-item>
+      </mat-list>
+    </ng-container>
 
-  <ng-template #emptyCart>
-    <div class="empty-cart">
-      <mat-icon class="icon">archive</mat-icon>
-      <span>{{'app.cart.body.empty' | translate}}</span>
-    </div>
-  </ng-template>
-</div>
-<div mat-dialog-actions>
-  <button mat-button
-          [mat-dialog-close]=""
-  >{{'app.cart.button.close' | translate}}</button>
-  <button mat-flat-button
-          color="primary"
-          [dlcmButtonSpinner]="(isLoadingCartObs | async)"
-          [disabled]="!(listArchiveObs | async) || (listArchiveObs | async).length === 0"
-          solidifyShortCuts
-          (onEnter)="submit()"
-          (click)="submit()"
-  >{{'app.cart.button.submit' | translate}}</button>
-</div>
+    <ng-template #emptyCart>
+      <div class="empty-cart">
+        <mat-icon class="icon">archive</mat-icon>
+        <span>{{'app.cart.body.empty' | translate}}</span>
+      </div>
+    </ng-template>
+  </div>
+  <div mat-dialog-actions>
+    <button mat-button
+            [mat-dialog-close]=""
+    >{{'app.cart.button.close' | translate}}</button>
+    <button mat-flat-button
+            color="primary"
+            [dlcmButtonSpinner]="(isLoadingCartObs | async)"
+            [disabled]="!(listArchiveObs | async) || (listArchiveObs | async).length === 0"
+            solidifyShortCuts
+            (onEnter)="submit()"
+            (click)="submit()"
+    >{{'app.cart.button.submit' | translate}}</button>
+  </div>
 </lib-empty-container>

src/app/components/dialogs/cart/cart.dialog.scss

 @import "./src/sass/abstracts/variables";
+@import "./src/sass/abstracts/mixins";
 
 $size-icon: 50px;
 
@@ -7,6 +8,16 @@ $size-icon: 50px;
     .mat-list-item .mat-list-item-content {
       display: flex;
       justify-content: space-between;
+      flex-wrap: nowrap;
+
+      .label {
+        @include truncate-with-ellipsis;
+        padding-right: 10px;
+      }
+
+      .size-and-delete {
+        flex-shrink: 0;
+      }
     }
   }