From 8ca9de3c8da4f992fe315929cdb61510915f81e2 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Mon, 11 Mar 2024 14:20:42 +0200
Subject: [PATCH] RED-8647: added ellipsis for longer primary attributes
 values.

---
 .../file-attribute/file-attribute.component.html         | 1 +
 .../file-attribute/file-attribute.component.scss         | 9 +++++++++
 .../file-attribute/file-attribute.component.ts           | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
index 8f6faa354..9fb4e8771 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
@@ -11,6 +11,7 @@
                 <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
                 <span
                     *ngIf="!isDate; else date"
+                    [style.max-width]="attributeValueWidth"
                     [matTooltip]="fileAttributeValue"
                     [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
                 >
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
index 445e41f21..3fd0b35f7 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
@@ -28,6 +28,15 @@
         display: flex;
         align-items: center;
         gap: 6px;
+        width: 90%;
+
+        span {
+            display: inline-block;
+            word-break: unset;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
         mat-icon {
             min-width: 12px;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
index 20f1034bd..be9b07315 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
@@ -70,6 +70,10 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         return this.width ? `${this.width * this.#widthFactor}px` : 'unset';
     }
 
+    get attributeValueWidth(): string {
+        return this.width ? `${this.width * 0.9}px` : 'unset';
+    }
+
     get isDate(): boolean {
         return this.fileAttribute.type === FileAttributeConfigTypes.DATE;
     }