diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
index 50f314dac..d37e10bb6 100644
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
+++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
@@ -66,8 +66,7 @@ if (!SERVER_RENDERED) {
     if (target.nodeName !== 'SPAN' || state.hoverTimeout !== undefined) {
       return;
     }
-
-    if (target.className !== 'cm-variable-valid') {
+    if (!target.classList.contains('cm-variable-valid')) {
       return;
     }
 
diff --git a/packages/bruno-app/src/utils/common/codemirror.js b/packages/bruno-app/src/utils/common/codemirror.js
index 59daee837..b1b60568c 100644
--- a/packages/bruno-app/src/utils/common/codemirror.js
+++ b/packages/bruno-app/src/utils/common/codemirror.js
@@ -25,10 +25,11 @@ export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
               stream.eat('}');
               let found = pathFoundInVariables(word, variables);
               if (found) {
-                return 'variable-valid';
+                return 'variable-valid random-' + (Math.random() + 1).toString(36).substring(9);
               } else {
-                return 'variable-invalid';
+                return 'variable-invalid random-' + (Math.random() + 1).toString(36).substring(9);
               }
+              // Random classname added so adjacent variables are not rendered in the same SPAN by CodeMirror.
             }
             word += ch;
           }