From 574a7316c3690cabbf880fe163a81519b9c5f965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 11 Nov 2021 22:41:08 +0200
Subject: [PATCH] Crop long column titles

---
 src/assets/styles/_common-mixins.scss                           | 1 +
 .../listing/table-column-name/table-column-name.component.html  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss
index a5260f9..ccfd059 100644
--- a/src/assets/styles/_common-mixins.scss
+++ b/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;
diff --git a/src/lib/listing/table-column-name/table-column-name.component.html b/src/lib/listing/table-column-name/table-column-name.component.html
index 745d01d..218e2db 100644
--- a/src/lib/listing/table-column-name/table-column-name.component.html
+++ b/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>