Crop long column titles

src/assets/styles/_common-mixins.scss

@@ -1,6 +1,7 @@
 @mixin line-clamp($lines) {
     overflow: hidden;
     text-overflow: ellipsis;
+    word-break: break-all;
     display: -webkit-box;
     -webkit-line-clamp: $lines; /* number of lines to show */
     -webkit-box-orient: vertical;

src/lib/listing/table-column-name/table-column-name.component.html

@@ -1,7 +1,7 @@
 <div (click)="!!sortByKey && sortingService?.toggleSort(sortByKey)" [class.pointer]="!!sortByKey" [ngClass]="class">
     <mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
 
-    <span class="all-caps-label">{{ label }}</span>
+    <span [matTooltip]="label" class="all-caps-label clamp-1" matTooltipPosition="above">{{ label }}</span>
 
     <mat-icon *ngIf="!!rightIcon" [matTooltip]="rightIconTooltip | translate" [svgIcon]="rightIcon" matTooltipPosition="above"></mat-icon>