Render MenuList in a Portal instead of using isolation on the table

statelyai · Aug 10, 2021 · b16b5fa · b16b5fa
1 parent 1916498
commit b16b5fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/EventsPanel.tsx b/src/EventsPanel.tsx
@@ -220,7 +220,7 @@ export const EventsPanel: React.FC = () => {
         </Box>
       </Box>
       <Box overflowY="auto">
-        <Table width="100%" isolation="isolate">
+        <Table width="100%">
           <Thead>
             <Tr>
               <Th {...stickyProps} width="100%">

diff --git a/src/Login.tsx b/src/Login.tsx
@@ -14,6 +14,7 @@ import {
   ModalHeader,
   ModalOverlay,
   Text,
+  Portal,
 } from '@chakra-ui/react';
 import { useActor } from '@xstate/react';
 import React from 'react';
@@ -55,25 +56,27 @@ export const Login: React.FC = () => {
               width="30px"
             />
           </MenuButton>
-          <MenuList>
-            {state.context.loggedInUserData && (
+          <Portal>
+            <MenuList>
+              {state.context.loggedInUserData && (
+                <MenuItem
+                  as="a"
+                  href={registryLinks.viewUserById(
+                    state.context.loggedInUserData.id,
+                  )}
+                >
+                  View Machines
+                </MenuItem>
+              )}
               <MenuItem
-                as="a"
-                href={registryLinks.viewUserById(
-                  state.context.loggedInUserData.id,
-                )}
+                onClick={() => {
+                  authService.send('SIGN_OUT');
+                }}
               >
-                View Machines
+                Logout
               </MenuItem>
-            )}
-            <MenuItem
-              onClick={() => {
-                authService.send('SIGN_OUT');
-              }}
-            >
-              Logout
-            </MenuItem>
-          </MenuList>
+            </MenuList>
+          </Portal>
         </Menu>
       )}