From 5d545b5f0d936bbe2b4cf09882b0c5519eda384b Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:44:53 +0100
Subject: [PATCH] [ACS-6581] Wrap comments into multiple lines (#9407)

* ACS-6581 Wrap comments into multiple lines

* ACS-6581 Used variable for border color

* ACS-6581 Changed value for padding

* ACS-6581 Used ellipsis and tooltip instead of wrapping comment

* ACS-6581 Add missing space
---
 .../lib/version-manager/version-list.component.html   | 11 ++++++++---
 .../lib/version-manager/version-list.component.scss   | 11 +++++++++--
 2 files changed, 17 insertions(+), 5 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 2efb034452..9dc23b7936 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
@@ -8,9 +8,14 @@
                 <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">{{version.entry.versionComment}}</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">
+                {{ version.entry.versionComment }}
+            </p>
 
             <div *ngIf="showActions">
                 <mat-menu [id]="'adf-version-list-action-menu-' + version.entry.id"
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 c8327ecdc2..06423fcbab 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,10 +1,12 @@
 .adf-version-list {
-    &-viewport {
+    .adf-version-list-viewport {
         height: 100%;
+        overflow-x: hidden;
     }
 
     .adf-version-list-item {
-        border-bottom: 1px solid #d8d8d8;
+        border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
+        width: 100vw;
     }
 
     &-item-version {
@@ -16,7 +18,12 @@
     }
 
     &-item-comment {
+        width: 500px;
         opacity: 0.5;
+
+        @media screen and (max-width: 629px) {
+            width: 97%;
+        }
     }
 
     &-item-name,