Added Dialog wrapper for portalContainer and gave inspector z-index o…

desktop/appcontainer/AppContainer.ts

@@ -122,25 +122,28 @@ const appContainerView = hoistCmp.factory({
     displayName: 'AppContainerView',
     model: uses(AppContainerModel),
 
-    render({model}) {
-        const {appSpec, appModel} = XH;
-        let ret: ReactElement = viewport(
-            vframe(
+render({model}) {
+    const {appSpec, appModel} = XH;
+    let ret: ReactElement = viewport(
+        vframe({
+            id: 'xh-app-content',
+            item:[
                 impersonationBar(),
                 bannerList(),
                 refreshContextView({
                     model: model.refreshContextModel,
                     item: frame(createElement(appSpec.componentClass, {model: appModel}))
                 }),
                 inspectorPanel(),
-                versionBar()
-            ),
-            mask({bind: model.appLoadModel, spinner: true}),
-            aboutDialog(),
-            changelogDialog(),
-            feedbackDialog(),
-            optionsDialog()
-        );
+                versionBar()]
+
+        }),
+        mask({bind: model.appLoadModel, spinner: true}),
+        aboutDialog(),
+        changelogDialog(),
+        feedbackDialog(),
+        optionsDialog()
+    );
 
         if (!appSpec.showBrowserContextMenu) {
             ret = useContextMenu(ret, null);

inspector/Inspector.scss

@@ -1,5 +1,6 @@
 .xh-inspector {
-  .xh-modal-support__host > .xh-panel__content > .xh-panel-header {
+  z-index: 999;
+  > div >.xh-panel__content > .xh-panel-header {
     background-color: hsl(33, 93%, 40%);
     color: white;
   }

inspector/InspectorPanel.ts

@@ -24,9 +24,7 @@ export const inspectorPanel = hoistCmp.factory({
                 defaultSize: 400,
                 side: 'bottom',
                 persistWith: XH.inspectorService.persistWith,
-                modalSupport: true,
-                showModalToggleButton: true,
-                showHeaderCollapseButton: false,
+                collapsible: false,
                 xhImpl: true
             },
             compactHeader: true,

kit/blueprint/Dialog.ts

@@ -5,11 +5,27 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp} from '@xh/hoist/core';
+import {elementFactory, hoistCmp} from '@xh/hoist/core';
+import {Dialog as BpDialog} from '@blueprintjs/core';
+
+const bpDialog = elementFactory(BpDialog)
+
 
 /**
  * Dialog Body for Blueprint, wrapped as a Hoist Component.
  */
+export const [Dialog, dialog] = hoistCmp.withContainerFactory({
+    displayName: 'Dialog',
+    observer: false, model: false, memo: false,
+
+    render(props) {
+        return bpDialog({
+            portalContainer: document.getElementById('xh-app-content'),
+            ...props
+        });
+    }
+});
+
 export const [DialogBody, dialogBody] = hoistCmp.withContainerFactory({
     displayName: 'DialogBody',
     className: 'bp4-dialog-body',

kit/blueprint/Wrappers.ts

@@ -64,7 +64,6 @@ export {
     Checkbox,
     ControlGroup,
     DatePicker,
-    Dialog,
     Drawer,
     EditableText,
     FileInput,
@@ -107,7 +106,6 @@ export const
     button = elementFactory(Button),
     controlGroup = elementFactory(ControlGroup),
     checkbox = elementFactory(Checkbox),
-    dialog = elementFactory(Dialog),
     datePicker = elementFactory(DatePicker),
     menuDivider = elementFactory(MenuDivider),
     menuItem = elementFactory(MenuItem),