From a1ef740db4a69d6c6d1ea320d390d71d64c04e58 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 2 Aug 2017 15:08:23 -0400
Subject: [PATCH] Fixed workflow maker responsiveness

---
 .../workflow-maker/workflow-maker.block.less          |  9 +++++----
 .../workflow-maker/workflow-maker.directive.js        | 11 +++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
index 2ea9aeeb3a..3de45ca157 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
@@ -1,12 +1,9 @@
 .WorkflowMaker-dialog {
     padding: 0px;
     margin-bottom: 20px;
-    position: fixed;
-    top: 0 !important;
-    bottom: 0;
     width: 100vw !important;
+    height: 100vh !important;
     overflow: scroll;
-
     .ui-dialog-buttonpane, .ui-dialog-titlebar {
         display:none;
     }
@@ -274,6 +271,10 @@
 .WorkflowMaker-formTab {
     margin-right: 10px;
 }
+.WorkflowMaker-preventBodyScrolling {
+    height: 100%;
+    overflow: hidden;
+}
 
 .Key-list {
     margin: 0;
diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
index eee0a0fb1c..03ee776dfe 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
@@ -20,8 +20,8 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
 
                 let availableHeight = $(window).height(),
                     availableWidth = $(window).width(),
-                    minimumWidth = 1300,
-                    minimumHeight = 550;
+                    minimumWidth = 682,
+                    minimumHeight = 400;
 
                 CreateDialog({
                     id: 'workflow-modal-dialog',
@@ -33,15 +33,15 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
                     position: ['center', 20],
                     onClose: function() {
                         $('#workflow-modal-dialog').empty();
+                        $('body').removeClass('WorkflowMaker-preventBodyScrolling');
                     },
                     onOpen: function() {
                         Wait('stop');
+                        $('body').addClass('WorkflowMaker-preventBodyScrolling');
 
                         // Let the modal height be variable based on the content
                         // and set a uniform padding
                         $('#workflow-modal-dialog').css({ 'padding': '20px' });
-                        $('#workflow-modal-dialog').parent('.ui-dialog').height(availableHeight > minimumHeight ? availableHeight : minimumHeight);
-                        $('#workflow-modal-dialog').parent('.ui-dialog').width(availableWidth > minimumWidth ? availableWidth : minimumWidth);
                         $('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight);
                         $('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth);
 
@@ -62,6 +62,7 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
 
                 scope.closeDialog = function() {
                     $('#workflow-modal-dialog').dialog('destroy');
+                    $('body').removeClass('WorkflowMaker-preventBodyScrolling');
 
                     $state.go('^');
                 };
@@ -69,8 +70,6 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
                 function onResize(){
                     availableHeight = $(window).height();
                     availableWidth = $(window).width();
-                    $('#workflow-modal-dialog').parent('.ui-dialog').height(availableHeight > minimumHeight ? availableHeight : minimumHeight);
-                    $('#workflow-modal-dialog').parent('.ui-dialog').width(availableWidth > minimumWidth ? availableWidth : minimumWidth);
                     $('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight);
                     $('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth);