styling to support long job titles on job results' stdout panel

awx/ui/client/src/job-results/job-results.block.less

@@ -161,6 +161,24 @@
     flex-direction: column;
 }
 
+.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;
 }

awx/ui/client/src/job-results/job-results.partial.html

@@ -431,8 +431,8 @@
             <div class="Panel JobResults-panelRight">
 
                 <!-- RIGHT PANE HEADER -->
-                <div class="StandardOut-panelHeader">
-                    <div class="StandardOut-panelHeaderText">
+                <div class="StandardOut-panelHeader JobResults-panelRightTitle">
+                    <div class="StandardOut-panelHeaderText JobResults-panelRightTitleText">
                         <i class="JobResults-statusResultIcon
                             fa icon-job-{{ job_status }}"
                             ng-show="stdoutFullScreen"
@@ -443,7 +443,7 @@
                         </i>
                         {{ job.name }}
                     </div>
-
+                    <div class="JobResults-badgeAndActionRow">
                         <!-- HEADER COUNTS -->
                         <div class="JobResults-badgeRow">
                             <!-- PLAYS COUNT -->
@@ -515,6 +515,7 @@
 
                         </div>
                     </div>
+                </div>
                 <host-status-bar></host-status-bar>
                 <smart-search
                     django-model="job_events"