From 38c2fe11aa89d175706c38446ea6f62b32f40ecf Mon Sep 17 00:00:00 2001
From: Brian Cooper <brian@allegro.com>
Date: Mon, 9 Nov 2020 16:40:52 -0500
Subject: [PATCH 1/2] fix(app): place top portal at higher z index than page
 level portal

In order to ensure that top level modals render on top of any page level modals, this sets the z
index of the top level portal root's contents to 10 as opposed to 1 for the page level portal
---
 app/src/components/portal/index.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/src/components/portal/index.js b/app/src/components/portal/index.js
index 9cc49327378..9733d1bed35 100644
--- a/app/src/components/portal/index.js
+++ b/app/src/components/portal/index.js
@@ -13,20 +13,25 @@ type State = {|
   hasRoot: boolean,
 |}
 
-const PORTAL_ROOT_ID_BY_LEVEL: { [PortalLevel]: string } = {
-  page: '__otAppModalPortalRoot',
-  top: '__otAppTopPortalRoot',
+type PortalLevelInfo = {|
+  id: string,
+  zIndex: number | string,
+|}
+
+const PORTAL_INFO_BY_LEVEL: { [PortalLevel]: PortalLevelInfo } = {
+  page: { id: '__otAppModalPortalRoot', zIndex: 1 },
+  top: { id: '__otAppTopPortalRoot', zIndex: 10 },
 }
 
 const getPortalRoot = level =>
-  global.document.getElementById(PORTAL_ROOT_ID_BY_LEVEL[level])
+  global.document.getElementById(PORTAL_INFO_BY_LEVEL[level].id)
 
 export function PortalRoot(): React.Node {
-  return <div id={PORTAL_ROOT_ID_BY_LEVEL.page} />
+  return <div id={PORTAL_INFO_BY_LEVEL.page.id} />
 }
 
 export function TopPortalRoot(): React.Node {
-  return <div id={PORTAL_ROOT_ID_BY_LEVEL.top} />
+  return <div id={PORTAL_INFO_BY_LEVEL.top.id} />
 }
 
 // the children of Portal are rendered into the PortalRoot if it exists in DOM

From fa6e14c61ca8a544ea7d53c02b7886741010f8ba Mon Sep 17 00:00:00 2001
From: Brian Cooper <brian@allegro.com>
Date: Mon, 9 Nov 2020 17:15:58 -0500
Subject: [PATCH 2/2] re add accidentally deleted changes

---
 app/src/components/portal/index.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/components/portal/index.js b/app/src/components/portal/index.js
index 9733d1bed35..44a2d3f7805 100644
--- a/app/src/components/portal/index.js
+++ b/app/src/components/portal/index.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import ReactDom from 'react-dom'
+import { Box } from '@opentrons/components'
 
 type PortalLevel = 'page' | 'top'
 
@@ -18,20 +19,20 @@ type PortalLevelInfo = {|
   zIndex: number | string,
 |}
 
-const PORTAL_INFO_BY_LEVEL: { [PortalLevel]: PortalLevelInfo } = {
+const PORTAL_ROOT_PROPS_BY_LEVEL: { [PortalLevel]: PortalLevelInfo } = {
   page: { id: '__otAppModalPortalRoot', zIndex: 1 },
   top: { id: '__otAppTopPortalRoot', zIndex: 10 },
 }
 
 const getPortalRoot = level =>
-  global.document.getElementById(PORTAL_INFO_BY_LEVEL[level].id)
+  global.document.getElementById(PORTAL_ROOT_PROPS_BY_LEVEL[level].id)
 
 export function PortalRoot(): React.Node {
-  return <div id={PORTAL_INFO_BY_LEVEL.page.id} />
+  return <Box {...PORTAL_ROOT_PROPS_BY_LEVEL.page} />
 }
 
 export function TopPortalRoot(): React.Node {
-  return <div id={PORTAL_INFO_BY_LEVEL.top.id} />
+  return <Box {...PORTAL_ROOT_PROPS_BY_LEVEL.top} />
 }
 
 // the children of Portal are rendered into the PortalRoot if it exists in DOM