diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index 88d19298f9..2b8cfb6386 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -4964,6 +4964,7 @@ div#driver-page-overlay { .json-tree-valuetype { font-size: 10px; padding-top: 2px; + width: fit-content !important; } .node-length-color { color: #3650AF; diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx index 97f348e6cd..973ee9b7a3 100644 --- a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx +++ b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx @@ -325,12 +325,12 @@ export const JSONNode = ({ data, ...restProps }) => {
updateHoveredNode(currentNode, currentNodePath)} + onMouseLeave={() => updateHoveredNode(null)} style={{ width: 'inherit' }} className={`${shouldDisplayIntendedBlock && 'group-border'} ${applySelectedNodeStyles && 'selected-node'}`} >
updateHoveredNode(currentNode, currentNodePath)} - onMouseLeave={() => updateHoveredNode(null)} className={cx('d-flex', { 'group-object-container': shouldDisplayIntendedBlock, 'mx-2': typeofCurrentNode !== 'Object' && typeofCurrentNode !== 'Array', diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx index 1596a50d83..3a44331725 100644 --- a/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx +++ b/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx @@ -15,7 +15,12 @@ const JSONTreeValueNode = ({ data, type }) => { ); } - const value = type === 'String' ? `"${data}"` : String(data); + let value = type === 'String' ? `"${data}"` : String(data); + + if (value.length > 60) { + value = `${value.substring(0, 60)} ... "`; + } + const clsForUndefinedOrNull = (type === 'Undefined' || type === 'Null') && 'badge badge-secondary'; return (