From 12c1f3fc1e2f3d980c5bcd78e77f328555096839 Mon Sep 17 00:00:00 2001
From: tamaragruszka <156320606+tamaragruszka@users.noreply.github.com>
Date: Wed, 10 Apr 2024 13:25:54 +0200
Subject: [PATCH] [ACS-7371] ADF manage version list missing button (#9484)

* [ACS-7371] list width limitation

* [ACS-7371] list width limitation

* [ACS-7371] change scss selector
---
 .../version-list.component.html               | 26 +++++++++++--------
 .../version-list.component.scss               | 13 +++++++---
 .../version-manager/version-list.component.ts |  4 +--
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/lib/content-services/src/lib/version-manager/version-list.component.html b/lib/content-services/src/lib/version-manager/version-list.component.html
index 9dc23b7936..572b7946b7 100644
--- a/lib/content-services/src/lib/version-manager/version-list.component.html
+++ b/lib/content-services/src/lib/version-manager/version-list.component.html
@@ -1,19 +1,23 @@
-<mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate" color="accent"></mat-progress-bar>
+<mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate"
+                  color="accent"></mat-progress-bar>
 <mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
     <cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport">
-        <mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
+        <mat-list-item class="adf-version-list-item"
+                       *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
             <mat-icon mat-list-icon>insert_drive_file</mat-icon>
-            <p mat-line class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
+            <p mat-line class="adf-version-list-item-line adf-version-list-item-name"
+               [id]="'adf-version-list-item-name-' + version.entry.id">{{ version.entry.name }}</p>
             <p mat-line>
-                <span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
-                <span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
+                <span class="adf-version-list-item-line adf-version-list-item-version"
+                      [id]="'adf-version-list-item-version-' + version.entry.id">{{ version.entry.id }}</span> -
+                <span class="adf-version-list-item-line adf-version-list-item-date"
+                      [id]="'adf-version-list-item-date-' + version.entry.id">{{ version.entry.modifiedAt | date }}</span>
             </p>
-            <p
-                mat-line
-                [id]="'adf-version-list-item-comment-' + version.entry.id"
-                class="adf-version-list-item-comment"
-                *ngIf="showComments"
-                [title]="version.entry.versionComment">
+            <p mat-line
+               [id]="'adf-version-list-item-comment-' + version.entry.id"
+               class="adf-version-list-item-comment"
+               *ngIf="showComments"
+               [title]="version.entry.versionComment">
                 {{ version.entry.versionComment }}
             </p>
 
diff --git a/lib/content-services/src/lib/version-manager/version-list.component.scss b/lib/content-services/src/lib/version-manager/version-list.component.scss
index b5fb64f174..7e5761fe1d 100644
--- a/lib/content-services/src/lib/version-manager/version-list.component.scss
+++ b/lib/content-services/src/lib/version-manager/version-list.component.scss
@@ -1,12 +1,17 @@
 .adf-version-list {
-    .adf-version-list-viewport {
+    &-viewport {
         height: 100%;
         overflow-x: hidden;
+        display: flex;
+
+        :first-child {
+            max-width: 100%;
+        }
     }
 
-    .adf-version-list-item {
+    &-item {
         border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
-        width: 100vw;
+        width: 100%;
     }
 
     &-item-version {
@@ -18,7 +23,7 @@
     }
 
     &-item-comment {
-        width: 500px;
+        width: 100%;
         opacity: 0.5;
 
         @media screen and (width <= 629px) {
diff --git a/lib/content-services/src/lib/version-manager/version-list.component.ts b/lib/content-services/src/lib/version-manager/version-list.component.ts
index 6d40690648..330574ac5b 100644
--- a/lib/content-services/src/lib/version-manager/version-list.component.ts
+++ b/lib/content-services/src/lib/version-manager/version-list.component.ts
@@ -19,9 +19,9 @@ import { AlfrescoApiService } from '@alfresco/adf-core';
 import { Component, Input, OnChanges, ViewEncapsulation, EventEmitter, Output, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { VersionsApi, Node, VersionEntry, NodesApi, NodeEntry, ContentApi, ContentPagingQuery } from '@alfresco/js-api';
 import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../dialogs/confirm.dialog';
+import { ConfirmDialogComponent } from '../dialogs';
 import { ContentVersionService } from './content-version.service';
-import { ContentService } from '../common/services/content.service';
+import { ContentService } from '../common';
 import { InfiniteScrollDatasource } from '../infinite-scroll-datasource';
 import { from, Observable, Subject } from 'rxjs';
 import { map, take, takeUntil } from 'rxjs/operators';