[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
Alfresco · Mar 8, 2024 · 5d545b5 · 5d545b5
1 parent ab6d94a
commit 5d545b5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 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
@@ -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
@@ -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,