RED-10218: fixed fileNameColumn width overlap.

apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html

@@ -9,7 +9,7 @@
             <mat-icon *ngIf="!fileAttribute.editable" [matTooltip]="'readonly' | translate" svgIcon="red:read-only"></mat-icon>
             <span
                 *ngIf="!isDate; else date"
-                [style.max-width]="attributeValueWidth"
+                [style.max-width]="attributeValueWidth()"
                 [matTooltip]="fileAttributeValue"
                 [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
             >
@@ -56,13 +56,12 @@
             class="edit-input"
             iqserStopPropagation
         >
-            <form [formGroup]="form">
+            <form [formGroup]="form" [style.width]="inputFormWidth()">
                 <iqser-dynamic-input
                     (closedDatepicker)="closedDatepicker = $event"
                     (keyup.enter)="form.valid && save()"
                     (keydown.escape)="close()"
-                    [style.max-width]="editFieldWidth"
+                    [style.width]="inputFieldWidth()"
-                    [style.min-width]="editFieldWidth"
                     [formControlName]="fileAttribute.id"
                     [id]="fileAttribute.id"
                     [ngClass]="{ 'workflow-input': mode === 'workflow' || fileNameColumn, 'file-name-input': fileNameColumn }"

apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss

@@ -97,7 +97,7 @@
                 iqser-circle-button {
                     margin-left: 15px;
 
-                    @media screen and (max-width: 1395px) {
+                    @media screen and (max-width: 1745px) {
                         margin-left: 6px;
                     }
                 }

apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
-import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
+import { Component, computed, effect, HostListener, input, Input, OnDestroy } from '@angular/core';
 import { AbstractControl, FormBuilder, FormsModule, ReactiveFormsModule, UntypedFormGroup, ValidatorFn } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -14,7 +14,7 @@ import {
     StopPropagationDirective,
     Toaster,
 } from '@iqser/common-ui';
-import { Debounce, log } from '@iqser/common-ui/lib/utils';
+import { Debounce } from '@iqser/common-ui/lib/utils';
 import { TranslateModule } from '@ngx-translate/core';
 import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
@@ -49,7 +49,6 @@ import { ConfigService } from '../../config.service';
 })
 export class FileAttributeComponent extends BaseFormComponent implements OnDestroy {
     readonly #subscriptions = new Subscription();
-    #widthFactor = window.innerWidth >= 1800 ? 0.85 : 0.7;
     isInEditMode = false;
     closedDatepicker = true;
     @Input({ required: true }) fileAttribute!: IFileAttributeConfig;
@@ -66,7 +65,10 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
     @Input({ required: true }) dossier!: Dossier;
     @Input() fileNameColumn = false;
     readonlyAttrs: string[] = [];
-    @Input() width?: number;
+    readonly width = input<number>();
+    readonly inputFormWidth = computed(() => (this.width() ? this.width() + 'px' : 'unset'));
+    readonly inputFieldWidth = computed(() => (this.width() ? this.width() - 50 + 'px' : 'unset'));
+    readonly attributeValueWidth = computed(() => (this.width() ? `${this.width() * 0.9}px` : 'unset'));
 
     constructor(
         router: Router,
@@ -99,14 +101,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         );
     }
 
-    get editFieldWidth(): string {
-        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;
     }
@@ -123,15 +117,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id];
     }
 
-    @HostListener('window:resize')
-    onResize() {
-        if (window.innerWidth >= 1800) {
-            this.#widthFactor = 0.85;
-        } else {
-            this.#widthFactor = 0.7;
-        }
-    }
-
     @Debounce(60)
     @HostListener('document:click', ['$event'])
     clickOutside($event: MouseEvent) {