Fix safari layout issue in Visualize, Graph and Lens (elastic#54694)

src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts

@@ -86,19 +86,17 @@ 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';
 
 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

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';

src/legacy/core_plugins/kibana/public/local_application_service/_index.scss

@@ -0,0 +1 @@
+@import 'local_application_service';

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;
+}

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;

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

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