From 119bef26411fb230d95f11a7ea1ed14d9f0ac1df Mon Sep 17 00:00:00 2001
From: Axel Lo <54468493+RheuX@users.noreply.github.com>
Date: Tue, 17 Dec 2024 13:31:21 -0800
Subject: [PATCH] resources: smoother collections (fixes #7928) (#7932)

Co-authored-by: mutugiii <mutugimutuma@gmail.com>
Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 package.json                                  |  2 +-
 .../planet-tag-selected-input.component.ts    | 23 ++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 78a26d8913..6896556574 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.9",
+  "version": "0.16.10",
   "myplanet": {
     "latest": "v0.21.42",
     "min": "v0.20.42"
diff --git a/src/app/shared/forms/planet-tag-selected-input.component.ts b/src/app/shared/forms/planet-tag-selected-input.component.ts
index 11f37d8f21..afc3d4308d 100644
--- a/src/app/shared/forms/planet-tag-selected-input.component.ts
+++ b/src/app/shared/forms/planet-tag-selected-input.component.ts
@@ -1,11 +1,13 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, HostListener } from '@angular/core';
 import { TagsService } from './tags.service';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
 @Component({
   template: `
     <span [ngSwitch]="selectedIds.length" class="small margin-lr-5">
       <span *ngSwitchCase="0" i18n>No collections selected</span>
-      <span *ngSwitchCase="1"><span i18n>Selected:</span>{{' ' + tooltipLabels}}</span>
+      <span *ngSwitchCase="1"><span i18n>Selected:</span>
+        {{ truncatedTooltip }}
       <span *ngSwitchDefault [matTooltip]="tooltipLabels" i18n>Hover to see selected collections</span>
     </span>
   `,
@@ -17,18 +19,33 @@ export class PlanetTagSelectedInputComponent implements OnChanges {
   @Input() allTags: any[] = [];
 
   tooltipLabels = '';
+  deviceType: DeviceType;
+  deviceTypes: typeof DeviceType = DeviceType;
 
   constructor(
-    private tagsService: TagsService
+    private tagsService: TagsService,
+    private deviceInfoService: DeviceInfoService
   ) {}
 
   ngOnChanges() {
     this.setTooltipLabels(this.selectedIds, this.allTags);
   }
 
+  @HostListener('window:resize') OnResize() {
+      this.deviceType = this.deviceInfoService.getDeviceType();
+    }
+
   setTooltipLabels(selectedIds, allTags) {
     const tagsNames = selectedIds.map((tag: any) => this.tagsService.findTag(tag, allTags).name);
     this.tooltipLabels = tagsNames.join(', ');
   }
 
+  get truncatedTooltip(): string {
+    const maxLength = this.deviceType === this.deviceTypes.DESKTOP ? 50 :
+                      this.deviceType === this.deviceTypes.TABLET ? 35 : 20;
+    return this.tooltipLabels.length > maxLength
+      ? this.tooltipLabels.slice(0, maxLength) + '...'
+      : this.tooltipLabels;
+  }
+
 }