IBX-11804: Missing text wrapping and ellipsis in table column causes layout collapse

Author: OstafinL

src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js

@@ -202,7 +202,8 @@ const parse = (baseElement = doc) => {
     }
 
     for (const tooltipNode of tooltipNodes) {
-        const hasEllipsisStyle = getComputedStyle(tooltipNode).textOverflow === 'ellipsis';
+        const computedStyle =  getComputedStyle(tooltipNode);
+        const hasEllipsisStyle = computedStyle.textOverflow === 'ellipsis' || computedStyle['-webkit-line-clamp'];
         const hasNewTitle = tooltipNode.hasAttribute('title');
         const tooltipInitialized = !!tooltipNode.dataset.originalTitle;
         let shouldHaveTooltip = !hasEllipsisStyle;

src/bundle/Resources/public/scss/_tables.scss

@@ -179,8 +179,6 @@
 
     &__cell {
         vertical-align: middle;
-        overflow-wrap: break-word;
-        max-width: 40vw;
 
         &--has-checkbox {
             width: calculateRem(48px);
@@ -221,6 +219,19 @@
         }
     }
 
+    &__body-cell-content {
+        &--truncate {
+            display: -webkit-box;
+            line-clamp: 2;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            word-break: break-all;
+            max-width: 40vw;
+            width: max-content;
+        }
+    }
+
     .table &__cell--close-left,
     .table &__header-cell--close-left {
         padding-left: 0;