diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
index 97f348e6cd..99223424ab 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
@@ -327,10 +327,10 @@ export const JSONNode = ({ data, ...restProps }) => {
updateHoveredNode(currentNode, currentNodePath)}
+ onMouseLeave={() => updateHoveredNode(null)}
>
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..f58ba2b2db 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
@@ -15,7 +15,11 @@ const JSONTreeValueNode = ({ data, type }) => {
);
}
- const value = type === 'String' ? `"${data}"` : String(data);
+ let value = type === 'String' ? `"${data}"` : String(data);
+ if (value.length > 65) {
+ value = `${value.substring(0, 65)} ... "`;
+ }
+
const clsForUndefinedOrNull = (type === 'Undefined' || type === 'Null') && 'badge badge-secondary';
return (