From df1ac952df1f42a4212c826209bdc20cb203ee14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina.teudan.ext@knecon.com>
Date: Thu, 23 Nov 2023 14:21:21 +0200
Subject: [PATCH] RED-7509: Scrollbar only for users list when editing dossier
 team

---
 .../edit-dossier-attributes.component.scss    | 98 ++++++++++---------
 .../edit-dossier-dictionary.component.html    | 36 +++----
 .../edit-dossier-dictionary.component.scss    | 15 +--
 .../edit-dossier-dialog.component.scss        |  2 +
 .../edit-dossier-team.component.scss          | 19 ++--
 5 files changed, 94 insertions(+), 76 deletions(-)

diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
index 07d985086..1217a2c23 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
@@ -1,66 +1,70 @@
+@use 'common-mixins';
+
 :host {
     display: flex;
     min-height: 100%;
+}
 
-    form {
-        display: flex;
+form {
+    display: flex;
+    flex: 1;
+
+    > div {
         flex: 1;
+        padding: 24px 32px;
+        overflow: auto;
+        @include common-mixins.scroll-bar;
+    }
 
-        > div {
-            flex: 1;
-            padding: 24px 32px;
-        }
+    .separator {
+        flex: none;
+        height: 100%;
+        width: 1px;
+        padding: 0;
+        background-color: var(--iqser-separator);
+    }
 
-        .separator {
-            flex: none;
-            height: 100%;
-            width: 1px;
-            padding: 0;
-            background-color: var(--iqser-separator);
-        }
+    .datepicker-wrapper {
+        width: initial;
+    }
 
-        .datepicker-wrapper {
-            width: initial;
-        }
+    .datepicker-wrapper input {
+        width: initial;
+        margin-top: 3px;
+    }
 
-        .datepicker-wrapper input {
-            width: initial;
-            margin-top: 3px;
-        }
+    .image-attribute {
+        &.displayed-preview {
+            flex-direction: row;
+            justify-content: space-between;
 
-        .image-attribute {
-            &.displayed-preview {
+            > div {
                 flex-direction: row;
-                justify-content: space-between;
-
-                > div {
-                    flex-direction: row;
-                    align-items: center;
-                    display: flex;
-                }
+                align-items: center;
+                display: flex;
             }
+        }
 
-            &:not(first-of-type) {
-                margin-top: 24px;
-            }
+        &:not(first-of-type) {
+            margin-top: 24px;
+        }
 
-            .upload-button {
-                margin-top: 6px;
-                width: fit-content;
-            }
+        .upload-button {
+            margin-top: 6px;
+            width: fit-content;
+        }
 
-            img {
-                width: 50px;
-                height: 50px;
-                object-fit: cover;
-                object-position: center;
-                border: 1px solid var(--iqser-grey-5);
-                margin-right: 15px;
-            }
+        img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            object-position: center;
+            border: 1px solid var(--iqser-grey-5);
+            margin-right: 15px;
+        }
 
-            iqser-circle-button:not(:last-child) {
-                margin-right: 2px;
-            }
+        iqser-circle-button:not(:last-child) {
+            margin-right: 2px;
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
index bb6d024ce..17ff6ac7e 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
@@ -1,10 +1,10 @@
-<div class="dictionary-content" *ngIf="dictionaries && selectedDictionary">
+<div *ngIf="dictionaries && selectedDictionary" class="dictionary-content">
     <div class="dictionaries">
         <div
-            class="dictionary"
+            (click)="selectDictionary(dictionary)"
             *ngFor="let dictionary of dictionaries"
             [class.active]="dictionary.label === selectedDictionary.label"
-            (click)="selectDictionary(dictionary)"
+            class="dictionary"
         >
             <redaction-annotation-icon
                 [color]="dictionary.hexColor"
@@ -12,7 +12,9 @@
                 type="square"
             ></redaction-annotation-icon>
             <div class="details">
-                <span> {{ dictionary.label }} </span>
+                <div [matTooltip]="dictionary.label" class="dictionary-label clamp-1" matTooltipPosition="above">
+                    {{ dictionary.label }}
+                </div>
                 <div class="small-label stats-subtitle">
                     <div>
                         <mat-icon svgIcon="red:entries"></mat-icon>
@@ -58,35 +60,35 @@
                     </div>
                 </div>
             </div>
-            <div class="header-right flex" [class.read-only]="!canEdit" *ngIf="!selectedDictionary.hint">
+            <div *ngIf="!selectedDictionary.hint" [class.read-only]="!canEdit" class="header-right flex">
                 <iqser-icon-button
-                    [label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
-                    [active]="activeEntryType === entryTypes.ENTRY"
                     (click)="selectEntryType(entryTypes.ENTRY)"
+                    [active]="activeEntryType === entryTypes.ENTRY"
+                    [label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
                 ></iqser-icon-button>
                 <iqser-icon-button
-                    [label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
-                    [active]="activeEntryType === entryTypes.FALSE_POSITIVE"
                     (click)="selectEntryType(entryTypes.FALSE_POSITIVE)"
+                    [active]="activeEntryType === entryTypes.FALSE_POSITIVE"
+                    [label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
                 ></iqser-icon-button>
                 <iqser-icon-button
-                    [label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
-                    [active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
                     (click)="selectEntryType(entryTypes.FALSE_RECOMMENDATION)"
+                    [active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
+                    [label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
                 ></iqser-icon-button>
             </div>
         </div>
 
         <redaction-dictionary-manager
-            [canEdit]="canEdit"
-            [initialEntries]="entriesToDisplay || []"
-            [withFloatingActions]="false"
-            [selectedDictionaryType]="selectedDictionary.type"
-            [selectedDictionaryTypeLabel]="selectedDictionary.label"
             [activeEntryType]="activeEntryType"
-            [hint]="selectedDictionary.hint"
+            [canEdit]="canEdit"
             [currentDossierId]="dossier.dossierId"
             [currentDossierTemplateId]="dossier.dossierTemplateId"
+            [hint]="selectedDictionary.hint"
+            [initialEntries]="entriesToDisplay || []"
+            [selectedDictionaryTypeLabel]="selectedDictionary.label"
+            [selectedDictionaryType]="selectedDictionary.type"
+            [withFloatingActions]="false"
         ></redaction-dictionary-manager>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
index 557b958c6..c9c4d1c56 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
@@ -1,5 +1,8 @@
-:host ::ng-deep .content {
-    padding: 0;
+@use 'common-mixins';
+
+:host {
+    flex: 1;
+    overflow: hidden;
 }
 
 .dictionary-content {
@@ -10,6 +13,7 @@
         border-right: 1px solid var(--iqser-separator);
         width: 30%;
         overflow-y: scroll;
+        @include common-mixins.scroll-bar;
 
         .dictionary {
             height: 40px;
@@ -19,11 +23,8 @@
             gap: 10px;
             cursor: pointer;
 
-            span {
+            .dictionary-label {
                 font-weight: bold;
-                white-space: nowrap;
-                overflow: hidden !important;
-                text-overflow: ellipsis;
             }
 
             .details {
@@ -39,9 +40,11 @@
             }
         }
     }
+
     .entries {
         width: 100%;
         padding: 24px 32px;
+
         .header-wrapper {
             display: flex;
             justify-content: space-between;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
index 2b8c3be56..85a0411f6 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
@@ -16,6 +16,8 @@
             overflow: auto;
             @include common-mixins.scroll-bar;
             flex: 1;
+            display: flex;
+            flex-direction: column;
             box-sizing: border-box;
             padding: 24px 32px;
             margin-right: 16px;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
index 51ce0bbb6..919436a78 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
@@ -1,5 +1,16 @@
 @use 'common-mixins';
 
+:host {
+    overflow: hidden;
+    display: flex;
+    min-height: 350px; // a random height that allows display of at least ~2 items in the team members list
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
 .search-container {
     margin-top: 16px;
 }
@@ -11,13 +22,9 @@ redaction-team-members {
 
 .members-list {
     margin-top: 16px;
-    overflow-y: hidden;
+    overflow: auto;
     width: 587px;
-
-    &:hover {
-        overflow-y: auto;
-        @include common-mixins.scroll-bar;
-    }
+    @include common-mixins.scroll-bar;
 
     > div {
         margin-bottom: 2px;