RED-8647: added ellipsis for longer primary attributes values.

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' }"
                 >

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;

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;
     }