From 97d460e051bf8232297b1255f5ca08256dbe9c89 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Tue, 14 Jan 2020 18:40:12 +0100
Subject: [PATCH] Fix safari layout issue in Visualize, Graph and Lens (#54694)

---
 .../kibana/public/dashboard/np_ready/application.ts       | 8 +++-----
 src/legacy/core_plugins/kibana/public/index.scss          | 3 +++
 .../kibana/public/local_application_service/_index.scss   | 1 +
 .../_local_application_service.scss                       | 5 +++++
 .../local_application_service.ts                          | 2 +-
 .../kibana/public/visualize/np_ready/application.ts       | 5 ++---
 x-pack/legacy/plugins/graph/public/application.ts         | 5 ++---
 7 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 src/legacy/core_plugins/kibana/public/local_application_service/_index.scss
 create mode 100644 src/legacy/core_plugins/kibana/public/local_application_service/_local_application_service.scss

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts
index 2a5dedab981510..7f7bf7cf47bdaf 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts
@@ -86,11 +86,9 @@ export const renderApp = (element: HTMLElement, appBasePath: string, deps: Rende
   };
 };
 
-const mainTemplate = (basePath: string) => `<div style="height: 100%">
+const mainTemplate = (basePath: string) => `<div ng-view class="kbnLocalApplicationWrapper">
   <base href="${basePath}" />
-  <div ng-view style="height: 100%;"></div>
-</div>
-`;
+</div>`;
 
 const moduleName = 'app/dashboard';
 
@@ -98,7 +96,7 @@ const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react'];
 
 function mountDashboardApp(appBasePath: string, element: HTMLElement) {
   const mountpoint = document.createElement('div');
-  mountpoint.setAttribute('style', 'height: 100%');
+  mountpoint.setAttribute('class', 'kbnLocalApplicationWrapper');
   // eslint-disable-next-line
   mountpoint.innerHTML = mainTemplate(appBasePath);
   // bootstrap angular into detached element and attach it later to
diff --git a/src/legacy/core_plugins/kibana/public/index.scss b/src/legacy/core_plugins/kibana/public/index.scss
index 3b49af9a4a6a66..dfe4aa1fd3b9f9 100644
--- a/src/legacy/core_plugins/kibana/public/index.scss
+++ b/src/legacy/core_plugins/kibana/public/index.scss
@@ -26,6 +26,9 @@
 // Management styles
 @import './management/index';
 
+// Local application mount wrapper styles
+@import 'local_application_service/index';
+
 // Dashboard styles
 // MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS
 @import './dashboard/index';
diff --git a/src/legacy/core_plugins/kibana/public/local_application_service/_index.scss b/src/legacy/core_plugins/kibana/public/local_application_service/_index.scss
new file mode 100644
index 00000000000000..12cc1444101e71
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/local_application_service/_index.scss
@@ -0,0 +1 @@
+@import 'local_application_service';
diff --git a/src/legacy/core_plugins/kibana/public/local_application_service/_local_application_service.scss b/src/legacy/core_plugins/kibana/public/local_application_service/_local_application_service.scss
new file mode 100644
index 00000000000000..33a6100c439759
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/local_application_service/_local_application_service.scss
@@ -0,0 +1,5 @@
+.kbnLocalApplicationWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
diff --git a/src/legacy/core_plugins/kibana/public/local_application_service/local_application_service.ts b/src/legacy/core_plugins/kibana/public/local_application_service/local_application_service.ts
index c09995caab6690..d52bec8304ff91 100644
--- a/src/legacy/core_plugins/kibana/public/local_application_service/local_application_service.ts
+++ b/src/legacy/core_plugins/kibana/public/local_application_service/local_application_service.ts
@@ -56,7 +56,7 @@ export class LocalApplicationService {
         outerAngularWrapperRoute: true,
         reloadOnSearch: false,
         reloadOnUrl: false,
-        template: `<div style="height:100%" id="${wrapperElementId}"></div>`,
+        template: `<div class="kbnLocalApplicationWrapper" id="${wrapperElementId}"></div>`,
         controller($scope: IScope) {
           const element = document.getElementById(wrapperElementId)!;
           let unmountHandler: AppUnmount | null = null;
diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts b/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts
index dcd68a26743ab5..222b0357089767 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts
@@ -63,9 +63,8 @@ export const renderApp = async (
   return () => $injector.get('$rootScope').$destroy();
 };
 
-const mainTemplate = (basePath: string) => `<div style="height: 100%">
+const mainTemplate = (basePath: string) => `<div ng-view class="kbnLocalApplicationWrapper">
   <base href="${basePath}" />
-  <div ng-view style="height: 100%;"></div>
 </div>
 `;
 
@@ -75,7 +74,7 @@ const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react'];
 
 function mountVisualizeApp(appBasePath: string, element: HTMLElement) {
   const mountpoint = document.createElement('div');
-  mountpoint.setAttribute('style', 'height: 100%');
+  mountpoint.setAttribute('class', 'kbnLocalApplicationWrapper');
   mountpoint.innerHTML = mainTemplate(appBasePath);
   // bootstrap angular into detached element and attach it later to
   // make angular-within-angular possible
diff --git a/x-pack/legacy/plugins/graph/public/application.ts b/x-pack/legacy/plugins/graph/public/application.ts
index 69bc7899746325..8f486ab6ad51a2 100644
--- a/x-pack/legacy/plugins/graph/public/application.ts
+++ b/x-pack/legacy/plugins/graph/public/application.ts
@@ -96,9 +96,8 @@ export const renderApp = ({ appBasePath, element, ...deps }: GraphDependencies)
   };
 };
 
-const mainTemplate = (basePath: string) => `<div style="height: 100%">
+const mainTemplate = (basePath: string) => `<div ng-view class="kbnLocalApplicationWrapper">
   <base href="${basePath}" />
-  <div ng-view style="height: 100%; display:flex; justify-content: center;"></div>
 </div>
 `;
 
@@ -108,7 +107,7 @@ const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react', 'ui.boo
 
 function mountGraphApp(appBasePath: string, element: HTMLElement) {
   const mountpoint = document.createElement('div');
-  mountpoint.setAttribute('style', 'height: 100%');
+  mountpoint.setAttribute('class', 'kbnLocalApplicationWrapper');
   // eslint-disable-next-line
   mountpoint.innerHTML = mainTemplate(appBasePath);
   // bootstrap angular into detached element and attach it later to