Feature: Object Variable Interpolation (#6317)

* Added JSON stringify for object values to allow for proper display
Added styling changes to accommodate objects

* Switching to a multi line approach

packages/bruno-app/src/globalStyles.js

@@ -395,11 +395,12 @@ const GlobalStyle = createGlobalStyle`
     font-size: ${(props) => props.theme.font.size.base};
     font-family: Inter, sans-serif;
     font-weight: 400;
-    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
     line-height: 1.25rem;
     color: ${(props) => props.theme.dropdown.color};
     min-height: 1.75rem;
-    max-width: 13.1875rem;
+    max-width: 17.1875rem;
   }
 
   /* Value Editor (CodeMirror) */

packages/bruno-app/src/utils/codemirror/brunoVarInfo.js

@@ -91,9 +91,20 @@ const getMaskedDisplay = (value) => {
 const updateValueDisplay = (valueDisplay, value, isSecret, isMasked, isRevealed) => {
   if ((isSecret || isMasked) && !isRevealed) {
     valueDisplay.textContent = getMaskedDisplay(value);
-  } else {
-    valueDisplay.textContent = value || '';
+    return;
   }
+
+  if (typeof value === 'object') {
+    valueDisplay.textContent = value === null ? 'null' : JSON.stringify(value, null, 2);
+    return;
+  }
+
+  if (typeof value === 'undefined' || value === undefined) {
+    valueDisplay.textContent = '';
+    return;
+  }
+
+  valueDisplay.textContent = value;
 };
 
 // Check if the raw value contains references to secret variables