From c18b60b8f1c705e5eb34d290edd300c56471b31f Mon Sep 17 00:00:00 2001
From: Zalenski Egor <63463140+zalenskiSofteq@users.noreply.github.com>
Date: Fri, 17 Jun 2022 10:18:26 +0300
Subject: [PATCH 1/2] #RI-3098 - Tooltip for channel name

---
 .../messages-list/MessagesList/MessagesList.tsx     | 13 +++++++++++--
 .../messages-list/MessagesList/styles.module.scss   |  9 ++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx
index f4b1f980bb..0b77e3aab3 100644
--- a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx
+++ b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ListChildComponentProps, ListOnScrollProps, VariableSizeList as List } from 'react-window'
 import { useParams } from 'react-router-dom'
-import { EuiButtonIcon } from '@elastic/eui'
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'
 
 import { getFormatDateTime } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -131,7 +131,16 @@ const MessagesList = (props: Props) => {
     return (
       <div style={style} className={styles.item} data-testid={`row-${index}`}>
         <div className={styles.time}>{getFormatDateTime(time)}</div>
-        <div className={styles.channel}>{channel}</div>
+        <div className={styles.channel}>
+          <EuiToolTip
+            content={channel}
+            position="bottom"
+            display="inlineBlock"
+            anchorClassName={styles.channelAnchor}
+          >
+            <div>{channel}</div>
+          </EuiToolTip>
+        </div>
         <div className={styles.message} ref={rowRef}>{message}</div>
       </div>
     )
diff --git a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss
index 70da3f6277..972db71595 100644
--- a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss
+++ b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss
@@ -20,13 +20,20 @@
 
 .channel {
   color: var(--euiColorMediumShade);
-  padding-right: 12px;
   width: 220px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.channelAnchor > div {
+  max-width: 220px;
+  padding-right: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .message {
   width: calc(100% - 372px);
   color: var(--htmlColor);

From 475aba594c670720082992e2d88dc9f5d3c2c6e1 Mon Sep 17 00:00:00 2001
From: Zalenski Egor <63463140+zalenskiSofteq@users.noreply.github.com>
Date: Fri, 17 Jun 2022 11:08:03 +0300
Subject: [PATCH 2/2] fix pr comment

---
 .../components/messages-list/MessagesList/MessagesList.tsx     | 3 +--
 .../components/messages-list/MessagesList/styles.module.scss   | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx
index 0b77e3aab3..0cbe0b87c8 100644
--- a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx
+++ b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx
@@ -136,9 +136,8 @@ const MessagesList = (props: Props) => {
             content={channel}
             position="bottom"
             display="inlineBlock"
-            anchorClassName={styles.channelAnchor}
           >
-            <div>{channel}</div>
+            <div className={styles.channelAnchor}>{channel}</div>
           </EuiToolTip>
         </div>
         <div className={styles.message} ref={rowRef}>{message}</div>
diff --git a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss
index 972db71595..48eada8ca5 100644
--- a/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss
+++ b/redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss
@@ -26,7 +26,7 @@
   text-overflow: ellipsis;
 }
 
-.channelAnchor > div {
+.channelAnchor {
   max-width: 220px;
   padding-right: 12px;
   overflow: hidden;