From d506cbf2495d6b4dfef452ab2ef19ba1b7d8d8ab Mon Sep 17 00:00:00 2001
From: jaredevantabor <jtabor@ansible.com>
Date: Mon, 6 Mar 2017 10:06:53 -0800
Subject: [PATCH] fixing workflow results page for long workflow titles

---
 .../workflow-results.block.less               | 18 ++++++
 .../workflow-results.partial.html             | 63 ++++++++++---------
 2 files changed, 50 insertions(+), 31 deletions(-)

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 51b8d739ed..94cb8d0708 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.block.less
+++ b/awx/ui/client/src/workflow-results/workflow-results.block.less
@@ -102,6 +102,24 @@
     padding-right: 10px;
 }
 
+.WorkflowResults-panelRightTitle{
+    flex-wrap: wrap;
+}
+
+.WorkflowResults-panelRightTitleText{
+    word-wrap: break-word;
+    word-break: break-all;
+    max-width: 100%;
+}
+
+.WorkflowResults-badgeAndActionRow{
+    display:flex;
+    flex: 1 0 auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    max-width: 100%;
+}
+
 .WorkflowResults-badgeRow {
     display: flex;
     align-items: center;
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 b73c1f609c..414920d340 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.partial.html
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -213,8 +213,8 @@
             <div class="Panel">
 
                 <!-- RIGHT PANE HEADER -->
-                <div class="StandardOut-panelHeader">
-                    <div class="StandardOut-panelHeaderText">
+                <div class="StandardOut-panelHeader WorkflowResults-panelRightTitle">
+                    <div class="StandardOut-panelHeaderText WorkflowResults-panelRightTitleText">
                         <i class="WorkflowResults-statusResultIcon
                             fa icon-job-{{ workflow.status }}"
                             ng-show="stdoutFullScreen"
@@ -224,39 +224,40 @@
                         </i>
                         {{ workflow.name }}
                     </div>
+                    <div class="WorkflowResults-badgeAndActionRow">
+                        <!-- HEADER COUNTS -->
+                        <div class="WorkflowResults-badgeRow">
+                            <!-- PLAYS COUNT -->
+                            <div class="WorkflowResults-badgeTitle">
+                                Total Jobs
+                            </div>
+                            <span class="badge List-titleBadge">
+                                {{ workflow_nodes.length || 0}}
+                            </span>
 
-                    <!-- HEADER COUNTS -->
-                    <div class="WorkflowResults-badgeRow">
-                        <!-- PLAYS COUNT -->
-                        <div class="WorkflowResults-badgeTitle">
-                            Total Jobs
+                            <!-- ELAPSED TIME -->
+                            <div class="WorkflowResults-badgeTitle">
+                                Elapsed
+                            </div>
+                            <span class="badge List-titleBadge">
+                                {{ workflow.elapsed * 1000 | duration: "hh:mm:ss"}}
+                            </span>
                         </div>
-                        <span class="badge List-titleBadge">
-                            {{ workflow_nodes.length || 0}}
-                        </span>
 
-                        <!-- ELAPSED TIME -->
-                        <div class="WorkflowResults-badgeTitle">
-                            Elapsed
+                        <!-- HEADER ACTIONS -->
+                        <div class="StandardOut-panelHeaderActions">
+
+                            <!-- FULL-SCREEN TOGGLE ACTION -->
+                            <button class="StandardOut-actionButton"
+                                aw-tool-tip="{{ toggleStdoutFullscreenTooltip }}"
+                                data-tip-watch="toggleStdoutFullscreenTooltip"
+                                data-placement="top"
+                                ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
+                                ng-click="toggleStdoutFullscreen()">
+                                <i class="fa fa-arrows-alt"></i>
+                            </button>
+
                         </div>
-                        <span class="badge List-titleBadge">
-                            {{ workflow.elapsed * 1000 | duration: "hh:mm:ss"}}
-                        </span>
-                    </div>
-
-                    <!-- HEADER ACTIONS -->
-                    <div class="StandardOut-panelHeaderActions">
-
-                        <!-- FULL-SCREEN TOGGLE ACTION -->
-                        <button class="StandardOut-actionButton"
-                            aw-tool-tip="{{ toggleStdoutFullscreenTooltip }}"
-                            data-tip-watch="toggleStdoutFullscreenTooltip"
-                            data-placement="top"
-                            ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
-                            ng-click="toggleStdoutFullscreen()">
-                            <i class="fa fa-arrows-alt"></i>
-                        </button>
-
                     </div>
                 </div>
                 <workflow-status-bar></workflow-status-bar>