diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index fd0d51c2d4..1bc8acc7ee 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/awx/ui/client/features/output/details.partial.html
@@ -288,7 +288,6 @@
     variables="{{ vm.extraVars.value }}"
     tooltip="{{ vm.extraVars.tooltip }}"
     label="{{ vm.extraVars.label}}"
-    label-class="JobResults-resultRowLabel"
     disabled="{{ vm.extraVars.disabled }}">
 </at-code-mirror>
 
diff --git a/awx/ui/client/src/workflow-results/workflow-results.block.less b/awx/ui/client/src/workflow-results/workflow-results.block.less
index 04e15c0c30..53a98f4db5 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.block.less
+++ b/awx/ui/client/src/workflow-results/workflow-results.block.less
@@ -137,7 +137,6 @@
     margin-left: 20px;
 }
 
-.WorkflowResults-extraVarsHelp {
-    margin-left: 10px;
-    color: @default-icon;
+.WorkflowResults-extraVarsLabel {
+    font-size:14px!important;
 }
diff --git a/awx/ui/client/src/workflow-results/workflow-results.controller.js b/awx/ui/client/src/workflow-results/workflow-results.controller.js
index 85112cddd8..23e2fe7269 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.controller.js
+++ b/awx/ui/client/src/workflow-results/workflow-results.controller.js
@@ -84,9 +84,9 @@ export default ['workflowData', 'workflowResultsService', 'workflowDataOptions',
             // set up a read only code mirror for extra vars
             $scope.variables = ParseVariableString($scope.workflow.extra_vars);
             $scope.parseType = 'yaml';
-            ParseTypeChange({ scope: $scope,
-                field_id: 'pre-formatted-variables',
-                readOnly: true });
+            $scope.varsTooltip= i18n._('Read only view of extra variables added to the workflow.');
+            $scope.varsLabel = i18n._('Extra Variables');
+
 
             // Click binding for the expand/collapse button on the standard out log
             $scope.stdoutFullScreen = false;
diff --git a/awx/ui/client/src/workflow-results/workflow-results.partial.html b/awx/ui/client/src/workflow-results/workflow-results.partial.html
index 2cb7f3fedb..dd8def8283 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.partial.html
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -145,26 +145,14 @@
                     </div>
 
                     <!-- EXTRA VARIABLES DETAIL -->
-                    <div class="WorkflowResults-resultRow
-                        WorkflowResults-resultRow--variables"
-                        ng-show="variables">
-                        <label class="WorkflowResults-resultRowLabel
-                            WorkflowResults-resultRowLabel--fullWidth">
-                            Extra Variables
-                            <i class="WorkflowResults-extraVarsHelp fa fa-question-circle"
-                                aw-tool-tip="{{'Read only view of extra variables added to the workflow.'|translate}}"
-                                data-placement="top">
-                            </i>
-                        </label>
-                        <textarea
-                            rows="6"
-                            ng-model="variables"
-                            name="variables"
-                            class="form-control Form-textArea Form-textAreaLabel Form-formGroup--fullWidth"
-                            id="pre-formatted-variables"
-                            disabled="disabled">
-                        </textarea>
-                    </div>
+                    <at-code-mirror
+                        ng-if="variables"
+                        variables="{{ variables }}"
+                        tooltip="{{ varsTooltip }}"
+                        label="{{ varsLabel }}"
+                        label-class="WorkflowResults-extraVarsLabel"
+                        disabled="disabled">
+                    </at-code-mirror>
 
                     <!-- LABELS DETAIL -->
                     <div class="WorkflowResults-resultRow"