Fix some text ellipsis on get-addons

wowup-electron/src/app/components/my-addons-addon-cell/my-addons-addon-cell.component.scss

@@ -61,19 +61,20 @@
   }
 
   .addon-title {
-    white-space: normal;
-    text-decoration: none;
-    word-break: break-word;
+    display: -webkit-box;
     font-size: 16px;
     line-height: 16px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
     overflow: hidden;
+    text-decoration: none;
+    white-space: normal;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 
     &:hover {
       cursor: pointer;
       text-decoration: underline;
+      color: var(--text-2);
     }
 
     &.text-warning:hover {

wowup-electron/src/app/components/potential-addon-table-column/potential-addon-table-column.component.html

@@ -3,7 +3,7 @@
     <div class="thumbnail-container bg-secondary-3">
       <app-addon-thumbnail [url]="addon.thumbnailUrl" [name]="addon.name"></app-addon-thumbnail>
     </div>
-    <div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 40px">
+    <div class="addon-text">
       <a class="addon-title hover-text-2 " (click)="viewDetails()">{{ addon.name }}</a>
       <div class="addon-version text-2">
         <div *ngIf="isBetaChannel || isAlphaChannel" class="channel mr-2"
@@ -14,7 +14,9 @@
           [matTooltip]="'COMMON.DEPENDENCY.TOOLTIP' | translate: dependencyTooltip">
           <mat-icon svgIcon="fas:link"></mat-icon>
         </span>
-        {{ addon | getAddonListItemFileProp: "version":channel }}
+        <span>
+          {{ addon | getAddonListItemFileProp: "version":channel }}
+        </span>
       </div>
     </div>
   </div>

wowup-electron/src/app/components/potential-addon-table-column/potential-addon-table-column.component.scss

@@ -54,15 +54,24 @@
     }
   }
 
+  .addon-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 40px;
+    overflow: hidden;
+  }
+
   .addon-title {
-    white-space: normal;
-    text-decoration: none;
+    display: -webkit-box;
     font-size: 16px;
     line-height: 16px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
     overflow: hidden;
+    text-decoration: none;
+    white-space: normal;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 
     &:hover {
       cursor: pointer;
@@ -75,8 +84,9 @@
     color: var(--text-2);
     font-size: 14px;
     line-height: 14px;
-    display: flex;
-    flex-direction: row;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .dependency-icon {

wowup-electron/src/app/pages/my-addons/my-addons.component.ts

@@ -13,7 +13,7 @@ import {
 import * as _ from "lodash";
 import { join } from "path";
 import { from, Observable, of, Subject, Subscription, zip } from "rxjs";
-import { catchError, debounceTime, first, map, switchMap, tap } from "rxjs/operators";
+import { catchError, debounceTime, delay, first, map, switchMap, tap } from "rxjs/operators";
 
 import { Overlay, OverlayRef } from "@angular/cdk/overlay";
 import { AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
@@ -330,12 +330,20 @@ export class MyAddonsComponent implements OnInit, OnDestroy, AfterViewInit {
     }
 
     this.setPageContextText();
-    this.lazyLoad()
-      .then(() => {
-        this.redrawRows();
-      })
-      .catch((e) => console.error(e));
-    // window.setTimeout(() => {}, 50);
+
+    from(this.lazyLoad())
+      .pipe(
+        first(),
+        delay(400),
+        map(() => {
+          this.redrawRows();
+        }),
+        catchError((e) => {
+          console.error(e);
+          return of(undefined);
+        })
+      )
+      .subscribe();
   };
 
   // Get the translated value of the provider name (unknown)