Merge pull request #4295 from RedisInsight/fe/bugfix/RI-6547-table-result-tooltip-text-ellipsis

RI-6547 Apply multiline ellipsis to the table tooltip

Author: mariasergeenko

redisinsight/ui/src/packages/redisearch/src/components/TableResult/TableResult.tsx

@@ -77,6 +77,7 @@ const TableResult = React.memo((props: Props) => {
             <EuiToolTip
               position="bottom"
               title={title}
+              className="text-multiline-ellipsis"
               anchorClassName={cx('tooltip')}
               content={formatLongName(value.toString())}
             >

redisinsight/ui/src/packages/redisearch/src/styles/styles.scss

@@ -85,6 +85,12 @@ html {
   display: inline-block !important;
 }
 
+// The style applies to the last div element in the tooltip, 
+// which is the one containing the text
+.euiToolTipPopover.text-multiline-ellipsis > div:last-child {
+  @include eui.multiline-ellipsis($line-count: 7, $line-height: 1.5rem);
+}
+
 .cell {
   position: relative;
 }

redisinsight/ui/src/styles/mixins/_eui.scss

@@ -86,3 +86,12 @@ $euiBreakpointKeys: map-keys($euiBreakpoints);
   $alpha: 1 - $factor;
   color: rgba($color, $alpha);
 }
+
+@mixin multiline-ellipsis($line-count, $line-height) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $line-count;
+  line-height: $line-height;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}