diff --git a/awx/ui/client/features/output/_index.less b/awx/ui/client/features/output/_index.less
index 4238573fb3..0bb8a72aba 100644
--- a/awx/ui/client/features/output/_index.less
+++ b/awx/ui/client/features/output/_index.less
@@ -6,6 +6,7 @@
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-bottom: none;
+        margin-top: 15px;
 
         & > div {
             user-select: none;
@@ -123,7 +124,7 @@
 
     &-container {
         font-family: monospace;
-        height: calc(~"100vh - 240px");
+        height: 100%;
         overflow-y: scroll;
         font-size: 15px;
         border: 1px solid @at-gray-b7;
@@ -143,6 +144,11 @@
             }
         }
     }
+
+    &--fullscreen {
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
 }
 
 .at-mixin-event() {
@@ -201,12 +207,12 @@
     flex-wrap: wrap;
 }
 
-
 // Status Bar -----------------------------------------------------------------------------
 .HostStatusBar {
     display: flex;
     flex: 0 0 auto;
     width: 100%;
+    margin-bottom: 15px;
 }
 
 .HostStatusBar-ok,
@@ -282,49 +288,28 @@
 
 }
 
+.HostStatusBar-tooltip.top {
+    margin-top: 4px;
+}
+
 // Job Details ---------------------------------------------------------------------------------
 
 @breakpoint-md: 1200px;
 
-.JobResults {
-    .OnePlusTwo-container(100%, @breakpoint-md);
+.JobResults-container {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: minmax(300px, 1fr) minmax(500px, 2fr);
+    grid-template-rows: minmax(500px, ~"calc(100vh - 140px)");
 
-    &.fullscreen {
-        .JobResults-rightSide {
-            max-width: 100%;
-        }
+    .at-Panel {
+        overflow-y: scroll;
     }
 }
 
-.JobResults-leftSide {
-    .OnePlusTwo-left--panel(100%, @breakpoint-md);
-    max-width: 30%;
-    height: ~"calc(100vh - 177px)";
-
-    @media screen and (max-width: @breakpoint-md) {
-        max-width: 100%;
-    }
-}
-
-.JobResults-rightSide {
-    .OnePlusTwo-right--panel(100%, @breakpoint-md);
-    height: ~"calc(100vh - 177px)";
-
-    @media (max-width: @breakpoint-md - 1px) {
-        padding-right: 15px;
-    }
-}
-
-.JobResults-detailsPanel{
-    overflow-y: scroll;
-}
-
-.JobResults-stdoutActionButton--active {
-    display: none;
-    visibility: hidden;
-    flex:none;
-    width:0px;
-    padding-right: 0px;
+.JobResults-detailsPanel {
+    display: flex;
+    flex-direction: column;
 }
 
 .JobResults-panelHeader {
@@ -352,8 +337,8 @@
     flex-wrap: wrap;
 }
 
-.JobResults-codeMirrorResultRowLabel{
-    font-size: 12px;
+.JobResults-resultRow #cm-variables-container {
+    width: 100%;
 }
 
 .JobResults-resultRowLabel {
@@ -416,109 +401,10 @@
     padding-right: 10px;
 }
 
-.JobResults-badgeRow {
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-}
-
-.JobResults-badgeTitle{
-    color: @default-interface-txt;
-    font-size: 14px;
-    margin-right: 10px;
-    font-weight: normal;
-    text-transform: uppercase;
-    margin-left: 20px;
-}
-
-@media (max-width: @breakpoint-md) {
-    .JobResults-detailsPanel {
-        overflow-y: auto;
-    }
-
-    .JobResults-rightSide {
-        height: inherit;
-    }
-}
-
-.JobResults-timeBadge {
-    float:right;
-    font-size: 11px;
-    font-weight: normal;
-    padding: 1px 10px;
-    height: 14px;
-    margin: 3px 15px;
-    width: 80px;
-    background-color: @default-bg;
-    border-radius: 5px;
-    color: @default-interface-txt;
-    margin-right: -5px;
-}
-
-.JobResults-panelRight {
-    display: flex;
-    flex-direction: column;
-}
-
-.JobResults-panelRight .SmartSearch-bar {
-    width: 100%;
-}
-
-.JobResults-panelRightTitle{
-    flex-wrap: wrap;
-}
-
-.JobResults-panelRightTitleText{
-    word-wrap: break-word;
-    word-break: break-all;
-    max-width: 100%;
-}
-
-.JobResults-badgeAndActionRow{
-    display:flex;
-    flex: 1 0 auto;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    max-width: 100%;
-}
-
 .StandardOut-panelHeader {
     flex: initial;
 }
 
-.StandardOut-panelHeader--jobIsRunning {
-    margin-bottom: 20px;
-}
-
-host-status-bar {
-    flex: initial;
-    margin-bottom: 20px;
-}
-
-smart-search {
-    flex: initial;
-}
-
-job-results-standard-out {
-    flex: 1;
-    flex-basis: auto;
-    height: ~"calc(100% - 800px)";
-    display: flex;
-    border: 1px solid @d7grey;
-    border-radius: 5px;
-    margin-top: 20px;
-}
-@media screen and (max-width: @breakpoint-md) {
-  job-results-standard-out {
-      height: auto;
-  }
-}
-
-.JobResults-extraVarsHelp {
-    margin-left: 10px;
-    color: @default-icon;
-}
-
 .JobResults-seeMoreLess {
     color: #337AB7;
     margin: 4px 0px;
@@ -528,3 +414,10 @@ job-results-standard-out {
     border-radius: 5px;
     font-size: 11px;
 }
+
+@media screen and (max-width: @breakpoint-md) {
+    .JobResults-container {
+        display: flex;
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index d873c4fbb5..5eb4f5b146 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/awx/ui/client/features/output/details.partial.html
@@ -40,248 +40,247 @@
 </div>
 
 <!-- LEFT PANE DETAILS GROUP -->
-<div>
-    <!-- STATUS DETAIL -->
-    <div class="JobResults-resultRow">
-        <label class="JobResults-resultRowLabel">{{ vm.status.label }}</label>
-        <div class="JobResults-resultRowText">
-            <i class="JobResults-statusResultIcon {{ vm.status.icon }}"></i>
-            {{ vm.status.value }}
-        </div>
+<!-- STATUS DETAIL -->
+<div class="JobResults-resultRow">
+    <label class="JobResults-resultRowLabel">{{ vm.status.label }}</label>
+    <div class="JobResults-resultRowText">
+        <i class="JobResults-statusResultIcon {{ vm.status.icon }}"></i>
+        {{ vm.status.value }}
     </div>
+</div>
 
-    <!-- EXPLANATION DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.jobExplanation">
-        <label class="JobResults-resultRowLabel">{{ vm.jobExplanation.label }}</label>
-        <div class="JobResults-resultRowText"
-             ng-show="!vm.jobExplanation.showMore">
-            {{ vm.jobExplanation.less }}
-            <span ng-show="vm.jobExplanation.hasMoreToShow">...</span>
-            <span ng-show="vm.jobExplanation.hasMoreToShow"
-                  class="JobResults-seeMoreLess"
-                  ng-click="vm.jobExplanation.showMore = true">
-                Show More
-            </span>
-        </div>
-        <div class="JobResults-resultRowText"
-             ng-show="vm.jobExplanation.showMore">
-            {{ vm.jobExplanation.more }}
-            <span class="JobResults-seeMoreLess"
-                  ng-click="vm.jobExplanation.showMore = false">
-                Show Less
-            </span>
-        </div>
+<!-- EXPLANATION DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.jobExplanation">
+    <label class="JobResults-resultRowLabel">{{ vm.jobExplanation.label }}</label>
+    <div class="JobResults-resultRowText"
+            ng-show="!vm.jobExplanation.showMore">
+        {{ vm.jobExplanation.less }}
+        <span ng-show="vm.jobExplanation.hasMoreToShow">...</span>
+        <span ng-show="vm.jobExplanation.hasMoreToShow"
+                class="JobResults-seeMoreLess"
+                ng-click="vm.jobExplanation.showMore = true">
+            Show More
+        </span>
     </div>
-
-    <!-- START TIME DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.started">
-        <label class="JobResults-resultRowLabel">{{ vm.started.label }}</label>
-        <div class="JobResults-resultRowText">
-            {{ vm.started.value }}
-        </div>
+    <div class="JobResults-resultRowText"
+            ng-show="vm.jobExplanation.showMore">
+        {{ vm.jobExplanation.more }}
+        <span class="JobResults-seeMoreLess"
+                ng-click="vm.jobExplanation.showMore = false">
+            Show Less
+        </span>
     </div>
+</div>
 
-    <!-- FINISHED TIME DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.started">
-        <label class="JobResults-resultRowLabel">{{ vm.finished.label }}</label>
-        <div class="JobResults-resultRowText">
-            {{ vm.finished.value }}
-        </div>
+<!-- START TIME DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.started">
+    <label class="JobResults-resultRowLabel">{{ vm.started.label }}</label>
+    <div class="JobResults-resultRowText">
+        {{ vm.started.value }}
     </div>
+</div>
 
-    <!-- module args -->
-    <div class="JobResults-resultRow" ng-if="vm.moduleArgs">
-        <label class="JobResults-resultRowLabel">{{ vm.moduleArgs.label }}</label>
-        <div class="JobResults-resultRowText">{{ vm.moduleArgs.value }}</div>
+<!-- FINISHED TIME DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.started">
+    <label class="JobResults-resultRowLabel">{{ vm.finished.label }}</label>
+    <div class="JobResults-resultRowText">
+        {{ vm.finished.value }}
     </div>
+</div>
 
-    <!-- RESULTS TRACEBACK DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.resultTraceback">
-        <label class="JobResults-resultRowLabel">{{ vm.resultTraceback.label }}</label>
-        <div class="JobResults-resultRowText"
-             ng-show="!vm.resultTraceback.showMore">
-            {{ vm.resultTraceback.less }}
-            <span ng-show="vm.resultTraceback.hasMoreToShow">...</span>
-            <span ng-show="vm.resultTraceback.hasMoreToShow"
-                  class="JobResults-seeMoreLess"
-                  ng-click="vm.resultTraceback.showMore = true">
-                Show More
-            </span>
-        </div>
-        <div class="JobResults-resultRowText"
-             ng-show="vm.resultTraceback.showMore">
-            {{ vm.resultTraceback.more }}
-            <span class="JobResults-seeMoreLess"
-                  ng-click="vm.resultTraceback.showMore = false">
-                Show Less
-            </span>
-        </div>
+<!-- module args -->
+<div class="JobResults-resultRow" ng-if="vm.moduleArgs">
+    <label class="JobResults-resultRowLabel">{{ vm.moduleArgs.label }}</label>
+    <div class="JobResults-resultRowText">{{ vm.moduleArgs.value }}</div>
+</div>
+
+<!-- RESULTS TRACEBACK DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.resultTraceback">
+    <label class="JobResults-resultRowLabel">{{ vm.resultTraceback.label }}</label>
+    <div class="JobResults-resultRowText"
+            ng-show="!vm.resultTraceback.showMore">
+        {{ vm.resultTraceback.less }}
+        <span ng-show="vm.resultTraceback.hasMoreToShow">...</span>
+        <span ng-show="vm.resultTraceback.hasMoreToShow"
+                class="JobResults-seeMoreLess"
+                ng-click="vm.resultTraceback.showMore = true">
+            Show More
+        </span>
     </div>
-
-    <!-- TEMPLATE DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.jobTemplate">
-        <label class="JobResults-resultRowLabel">{{ vm.jobTemplate.label }}</label>
-        <div class="JobResults-resultRowText">
-            <a href="{{ vm.jobTemplate.link }}"
-               aw-tool-tip="{{ vm.jobTemplate.tooltip }}"
-               data-placement="top"
-               data-tip-watch="vm.jobTemplate.tooltip">
-                {{ vm.jobTemplate.value }}
-            </a>
-
-            <a href="{{ vm.sourceWorkflowJob.link }}" 
-               ng-if="vm.sourceWorkflowJob"
-               aw-tool-tip="{{ vm.sourceWorkflowJob.tooltip }}" data-placement="top">
-                <i class="WorkflowBadge"> W</i>
-            </a>
-        </div>
+    <div class="JobResults-resultRowText"
+            ng-show="vm.resultTraceback.showMore">
+        {{ vm.resultTraceback.more }}
+        <span class="JobResults-seeMoreLess"
+                ng-click="vm.resultTraceback.showMore = false">
+            Show Less
+        </span>
     </div>
+</div>
 
-    <!-- JOB TYPE DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.jobType">
-        <label class="JobResults-resultRowLabel">{{ vm.jobType.label }}</label>
-        <div class="JobResults-resultRowText">{{ vm.jobType.value }}</div>
+<!-- TEMPLATE DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.jobTemplate">
+    <label class="JobResults-resultRowLabel">{{ vm.jobTemplate.label }}</label>
+    <div class="JobResults-resultRowText">
+        <a href="{{ vm.jobTemplate.link }}"
+            aw-tool-tip="{{ vm.jobTemplate.tooltip }}"
+            data-placement="top"
+            data-tip-watch="vm.jobTemplate.tooltip">
+            {{ vm.jobTemplate.value }}
+        </a>
+
+        <a href="{{ vm.sourceWorkflowJob.link }}"
+            ng-if="vm.sourceWorkflowJob"
+            aw-tool-tip="{{ vm.sourceWorkflowJob.tooltip }}" data-placement="top">
+            <i class="WorkflowBadge"> W</i>
+        </a>
     </div>
+</div>
 
-    <!-- LAUNCHED BY DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.launchedBy">
-        <label class="JobResults-resultRowLabel">{{ vm.launchedBy.label }}</label>
-        <div ng-if="vm.launchedBy.link" class="JobResults-resultRowText">
-            <a href="{{ vm.launchedBy.link }}" aw-tool-tip="{{ vm.launchedBy.tooltip }}" data-placement="top">
-                {{ vm.launchedBy.value }}
-            </a>
-        </div>
-        <div ng-if="!vm.launchedBy.link" class="jobResults-resultRowText">
+<!-- JOB TYPE DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.jobType">
+    <label class="JobResults-resultRowLabel">{{ vm.jobType.label }}</label>
+    <div class="JobResults-resultRowText">{{ vm.jobType.value }}</div>
+</div>
+
+<!-- LAUNCHED BY DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.launchedBy">
+    <label class="JobResults-resultRowLabel">{{ vm.launchedBy.label }}</label>
+    <div ng-if="vm.launchedBy.link" class="JobResults-resultRowText">
+        <a href="{{ vm.launchedBy.link }}" aw-tool-tip="{{ vm.launchedBy.tooltip }}" data-placement="top">
             {{ vm.launchedBy.value }}
-        </div>
+        </a>
     </div>
-
-    <!-- INVENTORY DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.inventory">
-        <label class="JobResults-resultRowLabel">{{ vm.inventory.label }}</label>
-        <div class="JobResults-resultRowText">
-            <a href="{{ vm.inventory.link }}" aw-tool-tip="{{ vm.inventory.tooltip }}" data-placement="top">
-                {{ vm.inventory.value }}
-            </a>
-        </div>
+    <div ng-if="!vm.launchedBy.link" class="jobResults-resultRowText">
+        {{ vm.launchedBy.value }}
     </div>
+</div>
 
-    <!-- PROJECT DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.project">
-        <label class="JobResults-resultRowLabel">{{ vm.project.label }}</label>
-        <div class="JobResults-resultRowText">
-            <a href="{{ vm.projectUpdate.link }}"
-                ng-if="vm.projectUpdate"
-                aw-tool-tip="{{ vm.projectUpdate.tooltip }}"
-                data-placement="top">
-                <i ng-if="vm.projectStatus" class="JobResults-statusResultIcon fa icon-job-{{ vm.projectStatus }}"></i>
-            </a>
-            <a href="{{ vm.project.link }}"
-                aw-tool-tip="{{ vm.project.tooltip }}"
-                data-placement="top">
-                {{ vm.project.value }}
-            </a>
-        </div>
+<!-- INVENTORY DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.inventory">
+    <label class="JobResults-resultRowLabel">{{ vm.inventory.label }}</label>
+    <div class="JobResults-resultRowText">
+        <a href="{{ vm.inventory.link }}" aw-tool-tip="{{ vm.inventory.tooltip }}" data-placement="top">
+            {{ vm.inventory.value }}
+        </a>
     </div>
+</div>
 
-    <!-- REVISION DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.scmRevision">
-        <label class="JobResults-resultRowLabel">{{ vm.scmRevision.label }}</label>
-        <at-truncate string="{{ vm.scmRevision.value }}" maxLength="7" class="JobResults-resultRowText"></at-truncate>
+<!-- PROJECT DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.project">
+    <label class="JobResults-resultRowLabel">{{ vm.project.label }}</label>
+    <div class="JobResults-resultRowText">
+        <a href="{{ vm.projectUpdate.link }}"
+            ng-if="vm.projectUpdate"
+            aw-tool-tip="{{ vm.projectUpdate.tooltip }}"
+            data-placement="top">
+            <i ng-if="vm.projectStatus" class="JobResults-statusResultIcon fa icon-job-{{ vm.projectStatus }}"></i>
+        </a>
+        <a href="{{ vm.project.link }}"
+            aw-tool-tip="{{ vm.project.tooltip }}"
+            data-placement="top">
+            {{ vm.project.value }}
+        </a>
     </div>
+</div>
 
-    <!-- PLAYBOOK DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.playbook">
-        <label class="JobResults-resultRowLabel">{{ vm.playbook.label }}</label>
-        <div class="JobResults-resultRowText">{{ vm.playbook.value }}</div>
+<!-- REVISION DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.scmRevision">
+    <label class="JobResults-resultRowLabel">{{ vm.scmRevision.label }}</label>
+    <at-truncate string="{{ vm.scmRevision.value }}" maxLength="7" class="JobResults-resultRowText"></at-truncate>
+</div>
+
+<!-- PLAYBOOK DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.playbook">
+    <label class="JobResults-resultRowLabel">{{ vm.playbook.label }}</label>
+    <div class="JobResults-resultRowText">{{ vm.playbook.value }}</div>
+</div>
+
+<!-- CREDENTIAL DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.credential">
+    <label class="JobResults-resultRowLabel">{{ vm.credential.label }}</label>
+    <div class="JobResults-resultRowText">
+        <a href="{{ vm.credential.link }}"
+            aw-tool-tip="{{ vm.credential.tooltip }}"
+            data-placement="top"
+            data-tip-watch="vm.credential.tooltip">
+            {{ vm.credential.value }}
+        </a>
     </div>
+</div>
 
-    <!-- CREDENTIAL DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.credential">
-        <label class="JobResults-resultRowLabel">{{ vm.credential.label }}</label>
-        <div class="JobResults-resultRowText">
-            <a href="{{ vm.credential.link }}"
-                aw-tool-tip="{{ vm.credential.tooltip }}"
-                data-placement="top"
-                data-tip-watch="vm.credential.tooltip">
-                {{ vm.credential.value }}
-            </a>
-        </div>
+<!-- FORKS DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.forks">
+    <label class="JobResults-resultRowLabel">{{ vm.forks.label }}</label>
+    <div class="JobResults-resultRowText">{{ vm.forks.value }}</div>
+</div>
+
+<!-- LIMIT DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.limit">
+    <label class="JobResults-resultRowLabel">{{ vm.limit.label }}</label>
+    <div class="JobResults-resultRowText">{{ vm.limit.value }}</div>
+</div>
+
+<!-- VERBOSITY DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.verbosity">
+    <label class="JobResults-resultRowLabel">{{ vm.verbosity.label }}</label>
+    <div class="JobResults-resultRowText">{{ vm.verbosity.value }}</div>
+</div>
+
+<!-- IG DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.instanceGroup">
+    <label class="JobResults-resultRowLabel">{{ vm.instanceGroup.label }}</label>
+    <div class="JobResults-resultRowText JobResults-resultRowText--instanceGroup">
+        {{ vm.instanceGroup.value }}
+        <span class="JobResults-isolatedBadge" ng-if="vm.instanceGroup.isolated">
+            {{ vm.instanceGroup.isolated }}
+        </span>
     </div>
+</div>
 
-    <!-- FORKS DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.forks">
-        <label class="JobResults-resultRowLabel">{{ vm.forks.label }}</label>
-        <div class="JobResults-resultRowText">{{ vm.forks.value }}</div>
+<!-- TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.jobTags">
+    <label class="JobResults-resultRowLabel">{{ vm.jobTags.label }}</label>
+    <div class="JobResults-resultRowText">{{ vm.jobTags.value }}</div>
+</div>
+
+<!-- SKIP TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.skipTags">
+    <label class="JobResults-resultRowLabel">{{ vm.skipTags.label }}</label>
+    <div class="JobResults-resultRowText"> {{ vm.skipTags.value }}</div>
+</div>
+
+<!-- EXTRA VARIABLES DETAIL -->
+<at-code-mirror
+    class="JobResults-resultRow"
+    ng-if="vm.extraVars"
+    variables="{{ vm.extraVars.value }}"
+    tooltip="{{ vm.extraVars.tooltip }}"
+    label="{{ vm.extraVars.label}}"
+    label-class="JobResults-resultRowLabel"
+    disabled="{{ vm.extraVars.disabled }}">
+</at-code-mirror>
+
+<!-- LABELS DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.labels">
+    <div class="JobResults-resultRow">
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="vm.labels.more"
+            href=""
+            ng-click="vm.toggleLabels()">
+            <span translate>Labels</span>
+            <i class="JobResults-expandArrow fa fa-caret-right"></i>
+        </a>
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="!vm.labels.more"
+            href=""
+            ng-click="vm.toggleLabels()">
+            <span translate>Labels</span>
+            <i class="JobResults-expandArrow fa fa-caret-down"></i>
+        </a>
     </div>
-
-    <!-- LIMIT DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.limit">
-        <label class="JobResults-resultRowLabel">{{ vm.limit.label }}</label>
-        <div class="JobResults-resultRowText">{{ vm.limit.value }}</div>
-    </div>
-
-    <!-- VERBOSITY DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.verbosity">
-        <label class="JobResults-resultRowLabel">{{ vm.verbosity.label }}</label>
-        <div class="JobResults-resultRowText">{{ vm.verbosity.value }}</div>
-    </div>
-
-    <!-- IG DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.instanceGroup">
-        <label class="JobResults-resultRowLabel">{{ vm.instanceGroup.label }}</label>
-        <div class="JobResults-resultRowText JobResults-resultRowText--instanceGroup">
-            {{ vm.instanceGroup.value }}
-            <span class="JobResults-isolatedBadge" ng-if="vm.instanceGroup.isolated">
-                {{ vm.instanceGroup.isolated }}
-            </span>
-        </div>
-    </div>
-
-    <!-- TAGS DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.jobTags">
-        <label class="JobResults-resultRowLabel">{{ vm.jobTags.label }}</label>
-        <div class="JobResults-resultRowText">{{ vm.jobTags.value }}</div>
-    </div>
-
-    <!-- SKIP TAGS DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.skipTags">
-        <label class="JobResults-resultRowLabel">{{ vm.skipTags.label }}</label>
-        <div class="JobResults-resultRowText"> {{ vm.skipTags.value }}</div>
-    </div>
-
-    <!-- EXTRA VARIABLES DETAIL -->
-    <at-code-mirror
-        ng-if="vm.extraVars"
-        variables="{{ vm.extraVars.value }}"
-        tooltip="{{ vm.extraVars.tooltip }}"
-        label="{{ vm.extraVars.label}}"
-        label-class="JobResults-codeMirrorResultRowLabel"
-        disabled="{{ vm.extraVars.disabled }}">
-    </at-code-mirror>
-
-    <!-- LABELS DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.labels">
-        <div class="JobResults-resultRow">
-            <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
-                ng-show="vm.labels.more"
-                href=""
-                ng-click="vm.toggleLabels()">
-                <span translate>Labels</span>
-                <i class="JobResults-expandArrow fa fa-caret-right"></i>
-            </a>
-            <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
-                ng-show="!vm.labels.more"
-                href=""
-                ng-click="vm.toggleLabels()">
-                <span translate>Labels</span>
-                <i class="JobResults-expandArrow fa fa-caret-down"></i>
-            </a>
-        </div>
-        <div id="job-results-labels" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
-            <div ng-repeat="label in vm.labels.value" class="LabelList-tagContainer">
-                <div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
-            </div>
+    <div id="job-results-labels" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
+        <div ng-repeat="label in vm.labels.value" class="LabelList-tagContainer">
+            <div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
         </div>
     </div>
 </div>
diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html
index b3bb6e95bc..f25171f9f2 100644
--- a/awx/ui/client/features/output/index.view.html
+++ b/awx/ui/client/features/output/index.view.html
@@ -1,64 +1,62 @@
-<div class="container-fluid">
-    <div ui-view></div>
-    <div class="col-md-4" ng-show="!vm.fullscreen.isFullscreen">
-        <at-panel>
-            <at-job-details resource="vm.resource"></at-job-details>
-        </at-panel>
-    </div>
+<div ui-view></div>
+<div class="JobResults-container">
+    <at-panel ng-show="!vm.fullscreen.isFullscreen">
+        <at-job-details resource="vm.resource"></at-job-details>
+    </at-panel>
 
-    <div ng-class="vm.fullscreen.isFullscreen ? 'col-md-12' : 'col-md-8'">
-        <at-panel class="at-Stdout">
-            <div class="at-Panel-headingTitle">{{ vm.title }}</div>
-            <at-job-stats
-                resource="vm.resource"
-                fullscreen="vm.fullscreen">
-            </at-job-stats>
-            <at-job-search></at-job-search>
+    <at-panel class="at-Stdout" ng-class="{'at-Stdout--fullscreen': vm.fullscreen.isFullscreen}">
+        <div class="at-Panel-headingTitle">
+            {{ vm.title }}
+        </div>
+        <at-job-stats
+            resource="vm.resource"
+            fullscreen="vm.fullscreen">
+        </at-job-stats>
+        <at-job-search></at-job-search>
 
-            <div class="at-Stdout-menuTop">
-                <div class="pull-left" ng-click="vm.expand()">
-                    <i class="at-Stdout-menuIcon fa"
-                       ng-class="{ 'fa-minus': vm.isExpanded, 'fa-plus': !vm.isExpanded }"></i>
-                </div>
-
-                <div class="pull-right" ng-click="vm.scroll.end()">
-                    <i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"
-                       ng-class=" { 'at-Stdout-menuIcon--active': vm.scroll.isLocked }"></i>
-                </div>
-                <div class="pull-right" ng-click="vm.scroll.home()">
-                    <i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i>
-                </div>
-                <div class="pull-right" ng-click="vm.scroll.down()">
-                    <i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i>
-                </div>
-                <div class="pull-right" ng-click="vm.scroll.up()">
-                    <i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i>
-                </div>
-
-                <div class="at-u-clear"></div>
+        <div class="at-Stdout-menuTop">
+            <div class="pull-left" ng-click="vm.expand()">
+                <i class="at-Stdout-menuIcon fa"
+                    ng-class="{ 'fa-minus': vm.isExpanded, 'fa-plus': !vm.isExpanded }"></i>
             </div>
 
-            <pre class="at-Stdout-container">
-                <table>
-                    <thead>
-                        <tr>
-                            <th class="at-Stdout-toggle">&nbsp;</th>
-                            <th class="at-Stdout-line"></th>
-                            <th class="at-Stdout-event"></th>
-                        </tr>
-                    </thead>
-                    <tbody id="atStdoutResultTable"></tbody>
-                </table>
-            </pre>
-
-            <div ng-show="vm.scroll.showBackToTop" class="at-Stdout-menuBottom">
-                <div class="at-Stdout-menuIconGroup" ng-click="vm.scroll.home()">
-                    <p class="pull-left"><i class="fa fa-angle-double-up"></i></p>
-                    <p class="pull-right">Back to Top</p>
-                </div>
-
-                <div class="at-u-clear"></div>
+            <div class="pull-right" ng-click="vm.scroll.end()">
+                <i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"
+                    ng-class=" { 'at-Stdout-menuIcon--active': vm.scroll.isLocked }"></i>
             </div>
-        </at-panel>
-    </div>
+            <div class="pull-right" ng-click="vm.scroll.home()">
+                <i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i>
+            </div>
+            <div class="pull-right" ng-click="vm.scroll.down()">
+                <i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i>
+            </div>
+            <div class="pull-right" ng-click="vm.scroll.up()">
+                <i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i>
+            </div>
+
+            <div class="at-u-clear"></div>
+        </div>
+
+        <pre class="at-Stdout-container">
+            <table>
+                <thead>
+                    <tr>
+                        <th class="at-Stdout-toggle">&nbsp;</th>
+                        <th class="at-Stdout-line"></th>
+                        <th class="at-Stdout-event"></th>
+                    </tr>
+                </thead>
+                <tbody id="atStdoutResultTable"></tbody>
+            </table>
+        </pre>
+
+        <div ng-show="vm.scroll.showBackToTop" class="at-Stdout-menuBottom">
+            <div class="at-Stdout-menuIconGroup" ng-click="vm.scroll.home()">
+                <p class="pull-left"><i class="fa fa-angle-double-up"></i></p>
+                <p class="pull-right">Back to Top</p>
+            </div>
+
+            <div class="at-u-clear"></div>
+        </div>
+    </at-panel>
 </div>
diff --git a/awx/ui/client/features/output/stats.partial.html b/awx/ui/client/features/output/stats.partial.html
index 70d980ed33..6427735236 100644
--- a/awx/ui/client/features/output/stats.partial.html
+++ b/awx/ui/client/features/output/stats.partial.html
@@ -42,40 +42,47 @@
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.ok }}"
-        data-tip-watch="vm.tooltips.ok">
+        data-tip-watch="vm.tooltips.ok"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-skipped"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.skipped }}"
-        data-tip-watch="vm.tooltips.skipped">
+        data-tip-watch="vm.tooltips.skipped"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-changed"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.changed }}"
-        data-tip-watch="vm.tooltips.changed">
+        data-tip-watch="vm.tooltips.changed"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-failures"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.failures }}"
-        data-tip-watch="vm.tooltips.failures">
+        data-tip-watch="vm.tooltips.failures"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-dark"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.dark }}"
-        data-tip-watch="vm.tooltips.dark">
+        data-tip-watch="vm.tooltips.dark"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-noData"
         ng-show="vm.running"
         data-placement="top"
-        aw-tool-tip="{{:: vm.tooltips.running }}">
+        aw-tool-tip="{{:: vm.tooltips.running }}"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-noData"
         ng-show="!vm.running && !vm.statsAreAvailable"
         data-placement="top"
-        aw-tool-tip="{{:: vm.tooltips.unavailable }}">
+        aw-tool-tip="{{:: vm.tooltips.unavailable }}"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
 </div>