diff --git a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap index 3a0fb1a954..0f1a725125 100644 --- a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap +++ b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap @@ -266,7 +266,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
demo-app
@@ -277,7 +277,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
4.35 s
@@ -292,7 +292,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
customer
@@ -303,7 +303,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
431 ms
@@ -318,7 +318,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
mysql
@@ -329,7 +329,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
431 ms
@@ -344,7 +344,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
frontend
@@ -355,7 +355,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
287 ms
@@ -370,7 +370,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
driver
@@ -381,7 +381,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
230 ms
@@ -396,7 +396,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
route
@@ -407,7 +407,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
66.4 ms
@@ -422,7 +422,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
redis
@@ -433,7 +433,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp >
31.3 ms
diff --git a/frontend/src/container/TracesExplorer/ListView/utils.tsx b/frontend/src/container/TracesExplorer/ListView/utils.tsx index 3a4e8934b9..1a0a43d4ca 100644 --- a/frontend/src/container/TracesExplorer/ListView/utils.tsx +++ b/frontend/src/container/TracesExplorer/ListView/utils.tsx @@ -6,6 +6,7 @@ import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util'; import { formUrlParams } from 'container/TraceDetail/utils'; import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter'; import { RowData } from 'lib/query/createTableColumnsFromQuery'; +import LineClampedText from 'periscope/components/LineClampedText/LineClampedText'; import { Link } from 'react-router-dom'; import { ILog } from 'types/api/logs/log'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; @@ -113,7 +114,9 @@ export const getListColumns = ( return ( - {value} + + + ); }, diff --git a/frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss b/frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss index 644ddc480b..8f1aa0ad48 100644 --- a/frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss +++ b/frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss @@ -1,6 +1,10 @@ -.line-clamped-text { - display: -webkit-box; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; +.line-clamped-wrapper { + max-height: 300px; + overflow-y: auto; + &__text { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } } diff --git a/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx b/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx index 9c77d514e0..dfcafcf02d 100644 --- a/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx +++ b/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx @@ -35,7 +35,7 @@ function LineClampedText({ const content = (
e.stopPropagation()}>{text}
} + overlayClassName="line-clamped-wrapper" // eslint-disable-next-line react/jsx-props-no-spreading {...tooltipProps} >