diff --git a/awx/ui/client/src/job-results/job-results.block.less b/awx/ui/client/src/job-results/job-results.block.less
index 55d9446c82..be8e330693 100644
--- a/awx/ui/client/src/job-results/job-results.block.less
+++ b/awx/ui/client/src/job-results/job-results.block.less
@@ -201,3 +201,13 @@ job-results-standard-out {
 .JobResults .CodeMirror-cursors {
     display: none;
 }
+
+.JobResults-downloadTooLarge {
+    display: flex;
+}
+
+.JobResults-downloadTooLarge--icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/awx/ui/client/src/job-results/job-results.controller.js b/awx/ui/client/src/job-results/job-results.controller.js
index 52db481671..8e327e5354 100644
--- a/awx/ui/client/src/job-results/job-results.controller.js
+++ b/awx/ui/client/src/job-results/job-results.controller.js
@@ -452,7 +452,7 @@ function(jobData, jobDataOptions, jobLabels, jobFinished, count, $scope, ParseTy
                 $(".header_task").hide();
                 $(".header_play").hide();
                 $scope.tooManyEvents = true;
-                $scope.standardOutTooltip = i18n._('The output is too large to display. Please download.<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-stack-1x icon-job-stdout-download-tooltip"></i></span>');
+                $scope.standardOutTooltip = i18n._('<div class="JobResults-downloadTooLarge"><div>The output is too large to display. Please download.</div><div class="JobResults-downloadTooLarge--icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-stack-1x icon-job-stdout-download-tooltip"></i></span></div></div>');
             } else {
                 $(".header_task").show();
                 $(".header_play").show();