[AAE-2478] Long task title show ellipsis when too long and add tool tip to task title inside form (#5704)

* [AAE-2478] Keep long task title on one line with ellipsis

* [AAE-2478] Add tool tip to task title inside form

* [create preview]

* Update form.component.html

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>

lib/core/form/components/form-renderer.component.scss

@@ -40,10 +40,18 @@
             & .mat-form-field-wrapper {
                 margin: 0 12px 0 0;
             }
+
+            & h4 {
+                margin-right: 55px;
+                display: grid;
+            }
         }
 
         &-form-title {
             font-size: mat-font-size($alfresco-typography, title);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         &-form-debug-container {
@@ -125,3 +133,4 @@
     }
 
 }
+

lib/process-services-cloud/src/lib/form/components/form-cloud.component.html

@@ -20,7 +20,7 @@
                             <mat-icon>refresh</mat-icon>
                         </button>
                     </div>
-                    <span *ngIf="isTitleEnabled()" class="adf-form-title">
+                    <span *ngIf="isTitleEnabled()" class="adf-form-title" [matTooltip]="form.taskName">
                         {{form.taskName}}
                         <ng-container *ngIf="!form.taskName">
                             {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}

lib/process-services/src/lib/form/form.component.html

@@ -20,13 +20,12 @@
                             <mat-icon>refresh</mat-icon>
                         </button>
                     </div>
-                    <span *ngIf="isTitleEnabled()" class="adf-form-title">
+                    <span *ngIf="isTitleEnabled()" class="adf-form-title" [matTooltip]="form.taskName">
                         {{form.taskName}}
                         <ng-container *ngIf="!form.taskName">
                             {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
                         </ng-container>
                     </span>
-
                 </h4>
             </mat-card-title>
         </mat-card-header>

lib/process-services/src/lib/form/start-form.component.scss

@@ -38,10 +38,6 @@
             & .mat-form-field-wrapper {
                 margin: 0 12px 0 0;
             }
-
-            h4 {
-                margin-right: 55px;
-            }
         }
 
         &-form-title {