diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts index e5a6c5a54c..aa4738d707 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts @@ -79,6 +79,10 @@ export class EllipsisChipListDirective implements OnDestroy { chipNodes.forEach((chip) => { this.renderer.setStyle(chip, 'display', 'inline-flex'); + const textLabelContainer = chip.querySelector('.mdc-evolution-chip__text-label'); + + this.applyMaxChipTextWidth(textLabelContainer, (availableWidth / 3)); + if ((usedWidth + (chip.offsetWidth + margin) <= availableWidth) && (visibleChipsCount < this.chipsValue.length)) { visibleChipsCount++; usedWidth += chip.offsetWidth + margin; @@ -104,15 +108,19 @@ export class EllipsisChipListDirective implements OnDestroy { this.renderer.setStyle(ellipsisChip, 'display', 'none'); this.renderer.setStyle(chipNodes[0], 'display', 'inline-flex'); - this.renderer.setStyle(textLabelContainer, 'max-width', computedTextWidth + 'px'); - this.renderer.setStyle(textLabelContainer, 'overflow', 'hidden'); - this.renderer.setStyle(textLabelContainer, 'text-overflow', 'ellipsis'); - this.renderer.setStyle(textLabelContainer, 'white-space', 'nowrap'); + this.applyMaxChipTextWidth(textLabelContainer, computedTextWidth); } else { this.renderer.setStyle(ellipsisChip, 'display', 'none'); } } + private applyMaxChipTextWidth(element: HTMLElement, widthLimit: number): void { + this.renderer.setStyle(element, 'max-width', widthLimit + 'px'); + this.renderer.setStyle(element, 'overflow', 'hidden'); + this.renderer.setStyle(element, 'text-overflow', 'ellipsis'); + this.renderer.setStyle(element, 'white-space', 'nowrap'); + } + ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss index 7f6aef05c0..24498863c9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss @@ -20,7 +20,7 @@ max-width: 700px; .title-container { - max-width: 14vw; + max-width: 11vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html index 97366bd26b..78ceaa566f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html @@ -595,13 +595,15 @@