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..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 @@ -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,15 @@ const MessagesList = (props: Props) => { return (
{getFormatDateTime(time)}
-
{channel}
+
+ +
{channel}
+
+
{message}
) 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..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 @@ -20,13 +20,20 @@ .channel { color: var(--euiColorMediumShade); - padding-right: 12px; width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } +.channelAnchor { + max-width: 220px; + padding-right: 12px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .message { width: calc(100% - 372px); color: var(--htmlColor);