diff --git a/awx/ui/src/screens/Job/JobDetail/JobDetail.js b/awx/ui/src/screens/Job/JobDetail/JobDetail.js
index dd36413c26..da17e529c5 100644
--- a/awx/ui/src/screens/Job/JobDetail/JobDetail.js
+++ b/awx/ui/src/screens/Job/JobDetail/JobDetail.js
@@ -17,7 +17,7 @@ import {
 import { CardBody, CardActionsRow } from 'components/Card';
 import ChipGroup from 'components/ChipGroup';
 import CredentialChip from 'components/CredentialChip';
-import { VariablesInput as _VariablesInput } from 'components/CodeEditor';
+import { VariablesDetail } from 'components/CodeEditor';
 import DeleteButton from 'components/DeleteButton';
 import ErrorDetail from 'components/ErrorDetail';
 import { LaunchButton, ReLaunchDropDown } from 'components/LaunchButton';
@@ -29,12 +29,6 @@ import { toTitleCase } from 'util/strings';
 import { formatDateString } from 'util/dates';
 import { Job } from 'types';
 
-const VariablesInput = styled(_VariablesInput)`
-  .pf-c-form__label {
-    --pf-c-form__label--FontWeight: var(--pf-global--FontWeight--bold);
-  }
-`;
-
 const StatusDetailValue = styled.div`
   align-items: center;
   display: inline-grid;
@@ -420,29 +414,29 @@ function JobDetail({ job, inventorySourceLabels }) {
           label={t`Last Modified`}
           date={job.modified}
         />
+        {job.extra_vars && (
+          <VariablesDetail
+            css="margin: 20px 0"
+            id="job-variables"
+            readOnly
+            value={job.extra_vars}
+            rows={4}
+            label={t`Variables`}
+            name="extra_vars"
+          />
+        )}
+        {job.artifacts && (
+          <VariablesDetail
+            css="margin: 20px 0"
+            id="job-artifacts"
+            readOnly
+            value={JSON.stringify(job.artifacts)}
+            rows={4}
+            label={t`Artifacts`}
+            name="artifacts"
+          />
+        )}
       </DetailList>
-      {job.extra_vars && (
-        <VariablesInput
-          css="margin: 20px 0"
-          id="job-variables"
-          readOnly
-          value={job.extra_vars}
-          rows={4}
-          label={t`Variables`}
-          name="extra_vars"
-        />
-      )}
-      {job.artifacts && (
-        <VariablesInput
-          css="margin: 20px 0"
-          id="job-artifacts"
-          readOnly
-          value={JSON.stringify(job.artifacts)}
-          rows={4}
-          label={t`Artifacts`}
-          name="artifacts"
-        />
-      )}
       <CardActionsRow>
         {job.type !== 'system_job' &&
           job.summary_fields.user_capabilities.start &&
diff --git a/awx/ui/src/screens/Job/JobDetail/JobDetail.test.js b/awx/ui/src/screens/Job/JobDetail/JobDetail.test.js
index 258698f56f..da19a0f357 100644
--- a/awx/ui/src/screens/Job/JobDetail/JobDetail.test.js
+++ b/awx/ui/src/screens/Job/JobDetail/JobDetail.test.js
@@ -251,7 +251,7 @@ describe('<JobDetail />', () => {
     wrapper.find('button[aria-label="Delete"]').simulate('click');
     await sleep(1);
     wrapper.update();
-    const modal = wrapper.find('Modal');
+    const modal = wrapper.find('Modal[aria-label="Alert modal"]');
     expect(modal.length).toBe(1);
     modal.find('button[aria-label="Confirm Delete"]').simulate('click');
     expect(JobsAPI.destroy).toHaveBeenCalledTimes(1);
@@ -272,7 +272,7 @@ describe('<JobDetail />', () => {
     );
     wrapper = mountWithContexts(<JobDetail job={mockJobData} />);
     wrapper.find('button[aria-label="Delete"]').simulate('click');
-    const modal = wrapper.find('Modal');
+    const modal = wrapper.find('Modal[aria-label="Alert modal"]');
     expect(modal.length).toBe(1);
     await act(async () => {
       modal.find('button[aria-label="Confirm Delete"]').simulate('click');