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 (