diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx index 521cc81b..3ba12740 100644 --- a/packages/app/src/components/DBRowTable.tsx +++ b/packages/app/src/components/DBRowTable.tsx @@ -136,6 +136,7 @@ const ACCESSOR_MAP: Record = { const MAX_SCROLL_FETCH_LINES = 1000; const MAX_CELL_LENGTH = 500; +const MAX_CELL_LENGTH_WRAPPED = 50_000; const getRowId = (row: Record): string => row[INTERNAL_ROW_FIELDS.ID]; @@ -554,6 +555,11 @@ export const RawLogTable = memo( ); }, [displayedColumns, columnSizeOpts, showExpandButton, containerWidth]); + const [wrapLinesEnabled, setWrapLinesEnabled] = useLocalStorage( + `${tableId}-wrap-lines`, + wrapLines ?? false, + ); + const columns = useMemo[]>( () => [ ...(showExpandButton @@ -612,9 +618,12 @@ export const RawLogTable = memo( return ; } + const maxLen = wrapLinesEnabled + ? MAX_CELL_LENGTH_WRAPPED + : MAX_CELL_LENGTH; const truncatedStrValue = - strValue.length > MAX_CELL_LENGTH - ? `${strValue.slice(0, MAX_CELL_LENGTH)}...` + strValue.length > maxLen + ? `${strValue.slice(0, maxLen)}...` : strValue; // Apply search highlighting if there's a search query @@ -661,6 +670,7 @@ export const RawLogTable = memo( showExpandButton, aliasMap, lastColumnWidth, + wrapLinesEnabled, tableSearch.searchQuery, tableSearch.matchIndices, tableSearch.currentMatchIndex, @@ -797,10 +807,6 @@ export const RawLogTable = memo( // Scroll to log id if it's not in window yet const [scrolledToHighlightedLine, setScrolledToHighlightedLine] = useState(false); - const [wrapLinesEnabled, setWrapLinesEnabled] = useLocalStorage( - `${tableId}-wrap-lines`, - wrapLines ?? false, - ); const [showSql, setShowSql] = useState(false); const handleSqlModalOpen = (open: boolean) => { diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss index 18c92f52..f504eba0 100644 --- a/packages/app/styles/LogTable.module.scss +++ b/packages/app/styles/LogTable.module.scss @@ -224,7 +224,7 @@ $button-height: 18px; .fieldText.wrapped { word-break: break-word; - white-space: normal; + white-space: pre-wrap; display: flex; }