diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index e926e73643..42c7aae4ae 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -37,12 +37,19 @@ const convert = new Convert();
interface RawLogViewProps {
isActiveLog?: boolean;
isReadOnly?: boolean;
+ isTextOverflowEllipsisDisabled?: boolean;
data: ILog;
linesPerRow: number;
}
function RawLogView(props: RawLogViewProps): JSX.Element {
- const { isActiveLog = false, isReadOnly = false, data, linesPerRow } = props;
+ const {
+ isActiveLog = false,
+ isReadOnly = false,
+ data,
+ linesPerRow,
+ isTextOverflowEllipsisDisabled = false,
+ } = props;
const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
data.id,
@@ -143,6 +150,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
@@ -181,6 +189,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
RawLogView.defaultProps = {
isActiveLog: false,
isReadOnly: false,
+ isTextOverflowEllipsisDisabled: false,
};
export default RawLogView;
diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts
index b4be783a2a..e47e736d61 100644
--- a/frontend/src/components/Logs/RawLogView/styles.ts
+++ b/frontend/src/components/Logs/RawLogView/styles.ts
@@ -35,6 +35,7 @@ interface RawLogContentProps {
linesPerRow: number;
$isReadOnly: boolean;
$isActiveLog: boolean;
+ $isTextOverflowEllipsisDisabled: boolean;
}
export const RawLogContent = styled.div`
@@ -42,12 +43,15 @@ export const RawLogContent = styled.div`
font-family: Fira Code, monospace;
font-weight: 300;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: ${(props): number => props.linesPerRow};
- line-clamp: ${(props): number => props.linesPerRow};
- -webkit-box-orient: vertical;
+ ${(props): string =>
+ props.$isTextOverflowEllipsisDisabled
+ ? 'white-space: nowrap'
+ : `overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: ${props.linesPerRow};
+ line-clamp: ${props.linesPerRow};
+ -webkit-box-orient: vertical;`};
font-size: 1rem;
line-height: 2rem;
diff --git a/frontend/src/container/LogsContextList/index.tsx b/frontend/src/container/LogsContextList/index.tsx
index 7037a386aa..25e0414498 100644
--- a/frontend/src/container/LogsContextList/index.tsx
+++ b/frontend/src/container/LogsContextList/index.tsx
@@ -154,7 +154,13 @@ function LogsContextList({
const getItemContent = useCallback(
(_: number, log: ILog): JSX.Element => (
-
+
),
[],
);
diff --git a/frontend/src/container/LogsExplorerContext/index.tsx b/frontend/src/container/LogsExplorerContext/index.tsx
index 746148f3d1..0631c78ea6 100644
--- a/frontend/src/container/LogsExplorerContext/index.tsx
+++ b/frontend/src/container/LogsExplorerContext/index.tsx
@@ -9,7 +9,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
import { memo, useCallback, useMemo, useState } from 'react';
import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { EditButton, TitleWrapper } from './styles';
+import { EditButton, LogContainer, TitleWrapper } from './styles';
import { LogsExplorerContextProps } from './types';
import useInitialQuery from './useInitialQuery';
@@ -96,7 +96,15 @@ function LogsExplorerContext({
// eslint-disable-next-line react/jsx-props-no-spreading
{...contextListParams}
/>
-
+
+
+
`
? getAlphaColor(themeColors.white)[45]
: getAlphaColor(themeColors.black)[45]};
`;
+
+export const LogContainer = styled.div`
+ overflow-x: auto;
+`;