Merge branch web-remote:master into master

package.json

@@ -25,17 +25,17 @@
     "tx": "node scripts/tx.js"
   },
   "dependencies": {
-    "@angular/animations": "^18.2.3",
-    "@angular/cdk": "^18.2.3",
-    "@angular/common": "^18.2.3",
-    "@angular/compiler": "^18.2.3",
-    "@angular/core": "^18.2.3",
-    "@angular/forms": "^18.2.3",
-    "@angular/material": "^18.2.3",
-    "@angular/platform-browser": "^18.2.3",
-    "@angular/platform-browser-dynamic": "^18.2.3",
-    "@angular/router": "^18.2.3",
-    "@fontsource/roboto": "^5.0.14",
+    "@angular/animations": "^18.2.4",
+    "@angular/cdk": "^18.2.4",
+    "@angular/common": "^18.2.4",
+    "@angular/compiler": "^18.2.4",
+    "@angular/core": "^18.2.4",
+    "@angular/forms": "^18.2.4",
+    "@angular/material": "^18.2.4",
+    "@angular/platform-browser": "^18.2.4",
+    "@angular/platform-browser-dynamic": "^18.2.4",
+    "@angular/router": "^18.2.4",
+    "@fontsource/roboto": "^5.1.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "core-js": "^3.38.1",
@@ -44,34 +44,34 @@
     "zone.js": "^0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.3",
-    "@angular-devkit/core": "^18.2.3",
-    "@angular-devkit/schematics": "^18.2.3",
-    "@angular-eslint/builder": "^18.3.0",
-    "@angular-eslint/eslint-plugin": "^18.3.0",
-    "@angular-eslint/eslint-plugin-template": "^18.3.0",
-    "@angular-eslint/schematics": "^18.3.0",
-    "@angular-eslint/template-parser": "^18.3.0",
-    "@angular/cli": "~18.2.3",
-    "@angular/compiler-cli": "^18.2.3",
-    "@angular/language-service": "^18.2.3",
+    "@angular-devkit/build-angular": "^18.2.4",
+    "@angular-devkit/core": "^18.2.4",
+    "@angular-devkit/schematics": "^18.2.4",
+    "@angular-eslint/builder": "^18.3.1",
+    "@angular-eslint/eslint-plugin": "^18.3.1",
+    "@angular-eslint/eslint-plugin-template": "^18.3.1",
+    "@angular-eslint/schematics": "^18.3.1",
+    "@angular-eslint/template-parser": "^18.3.1",
+    "@angular/cli": "~18.2.4",
+    "@angular/compiler-cli": "^18.2.4",
+    "@angular/language-service": "^18.2.4",
     "@chiragrupani/karma-chromium-edge-launcher": "^2.4.1",
     "@transifex/api": "^7.1.3",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
-    "@types/jest": "^29.5.12",
-    "@types/node": "~22.5.4",
-    "@typescript-eslint/eslint-plugin": "8.4.0",
-    "@typescript-eslint/parser": "8.4.0",
-    "@typescript-eslint/utils": "8.4.0",
+    "@types/jest": "^29.5.13",
+    "@types/node": "~22.5.5",
+    "@typescript-eslint/eslint-plugin": "8.5.0",
+    "@typescript-eslint/parser": "8.5.0",
+    "@typescript-eslint/utils": "8.5.0",
     "axios": "^1.7.7",
     "browserslist": "^4.23.3",
     "browserslist-useragent-regexp": "^4.1.3",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "~2.30.0",
-    "eslint-plugin-jsdoc": "~50.2.2",
+    "eslint-plugin-jsdoc": "~50.2.3",
     "eslint-plugin-prefer-arrow": "~1.2.3",
-    "jasmine-core": "~5.2.0",
+    "jasmine-core": "~5.3.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",

src/app/components/service/service-item/service-item.component.html

@@ -1,17 +1,21 @@
 <mat-card
   class="service-item no-select"
   [class.selected]="selected">
-  <mat-card-content (click)="onItemSelected(item)">
-    <mat-icon class="service-item-icon">{{ getIcon(item) }}</mat-icon> {{ item.title }}
+  <mat-card-content
+    class="card-content"
+    (click)="onItemSelected(item)">
+    <mat-icon class="service-item-icon">{{ getIcon(item) }}</mat-icon>&nbsp;{{ item.title }}
   </mat-card-content>
   @if (useDeleteServiceItemFromOpenlp) {
-    <button
-      mat-icon-button
-      class="delete-service-item-button no-select"
-      [class.selected]="selected"
-      matTooltip="{{ 'DELETE_FROM_SERVICE' | translate | titlecase }}"
-      (click)="deleteFromService(item)">
-      <mat-icon>delete_outline</mat-icon>
-    </button>
+    <mat-card-actions>
+      <button
+        mat-icon-button
+        class="delete-service-item-button no-select"
+        [class.selected]="selected"
+        matTooltip="{{ 'DELETE_FROM_SERVICE' | translate | titlecase }}"
+        (click)="deleteFromService(item)">
+        <mat-icon>delete_outline</mat-icon>
+      </button>
+    </mat-card-actions>
   }
 </mat-card>

src/app/components/service/service-item/service-item.component.scss

@@ -1,10 +1,20 @@
+.service-item {
+  display: flex;
+  flex-direction: row;
+}
+
 /* Align icons with text */
 .service-item-icon {
   line-height: inherit;
 }
 
+.card-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .delete-service-item-button {
   position: absolute;
-  top: 5px;
-  right: 20px;
+  right: 5px;
 }