From ab73eb841fd7ae0e0c40d900b4a45e79ef2fccb3 Mon Sep 17 00:00:00 2001
From: kchepikava <krystsina.chepikava@softeq.com>
Date: Tue, 29 Oct 2024 10:43:34 +0100
Subject: [PATCH] RI-6248 fixed pub-sub styling

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

diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx
index 5d41879250..cfb8ab2ab7 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx
@@ -130,7 +130,7 @@ const MessagesList = (props: Props) => {
             <div className={styles.channelAnchor}>{channel}</div>
           </EuiToolTip>
         </div>
-        <div className={styles.message} ref={rowRef}>{message}</div>
+        <div className={styles.message} ref={rowRef}><span>{message}</span></div>
       </div>
     )
   }
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss
index 3cd780a1ce..54a6b9d8dd 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss
@@ -12,12 +12,12 @@
 .time {
   color: var(--defaultGreenColor);
   width: 150px;
+  padding-right: 4px;
 }
 
 .channel {
   color: var(--euiColorMediumShade);
   width: 220px;
-  max-height: 26px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -29,12 +29,19 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .message {
   width: calc(100% - 372px);
   color: var(--htmlColor);
   word-break: break-word;
+
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 
 .header {