Fixed Text Size Issue

Author: danielehrhardt

src/pages/home/home.page.html

@@ -53,7 +53,7 @@
         "
         *cdkVirtualFor="let package of packages | filter: currentSearch"
       >
-        <div class="flex-grow font-medium pr-2">
+        <div class="title flex-grow font-medium pr-2">
           <h2 class="font-bold">{{package[0]}}</h2>
           <p class="text-sm font-normal text-gray-500 tracking-wide">
             {{package[1]}} - {{package[2]}}
@@ -100,7 +100,7 @@ <h2 class="font-bold">{{package[0]}}</h2>
         *cdkVirtualFor="let package of installed  | filter: currentSearch ; trackBy:trackBy"
       >
         <div
-          class="font-medium pr-2 flex-grow"
+          class="title font-medium pr-2 flex-grow"
           style="max-width: calc(100% - 85px)"
         >
           <h2 class="font-bold">{{package[0]}}</h2>

src/pages/home/home.page.scss

@@ -17,4 +17,15 @@ cdk-virtual-scroll-viewport {
 .item {
   height: 55px;
   width: 100%;
+  .title {
+    max-width: calc(100% - 60px);
+    h2,
+    p {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 100%;
+      height: 1.2em;
+      white-space: nowrap;
+    }
+  }
 }

src/pages/home/home.page.ts

@@ -3,7 +3,7 @@
 /* eslint-disable no-async-promise-executor */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { LoadingController, ToastController } from '@ionic/angular';
 import { CommandService } from '../../app/core/services/command.service';
 import { ElectronService } from '../../app/core/services/electron.service';
@@ -24,7 +24,8 @@ export class HomePage implements OnInit {
     private loadingCtrl: LoadingController,
     private toastCtrl: ToastController,
     private http: HttpClient,
-    private electronService: ElectronService
+    private electronService: ElectronService,
+    private cdr: ChangeDetectorRef
   ) {}
 
   async segmentChanged($event) {
@@ -203,6 +204,9 @@ export class HomePage implements OnInit {
   }
 
   doSearch() {
-    this.currentSearch = this.search;
+    setTimeout(() => {
+      this.currentSearch = this.search;
+      this.cdr.detectChanges();
+    }, 50);
   }
 }