interface: correct modal stacking behaviour

pkg/interface/src/logic/lib/useOutsideClick.ts

@@ -2,14 +2,15 @@ import { useEffect, RefObject } from "react";
 
 export function useOutsideClick(
   ref: RefObject<HTMLElement | null | undefined>,
-  onClick: () => void
+  onClick: () => void,
 ) {
   useEffect(() => {
     function handleClick(event: MouseEvent) {
+      const portalRoot = document.querySelector('#portal-root')!;
       if (
         ref.current &&
         !ref.current.contains(event.target as any) &&
-        !document.querySelector("#portal-root")!.contains(event.target as any)
+        (!portalRoot.contains(ref.current) || portalRoot.contains(event.target as any))
       ) {
         onClick();
       }

pkg/interface/src/views/apps/notifications/graph.tsx

@@ -129,6 +129,8 @@ const GraphNodeContent = ({ group, post, contacts, mod, description, index, remo
         measure={() => {}}
         group={group}
         contacts={contacts}
+        groups={{}}
+        associations={{ graph: {}, groups: {}}}
         msg={post}
         fontSize='0'
         pt='2'

pkg/interface/src/views/components/leap/Omnibox.tsx

@@ -12,6 +12,7 @@ import { deSig } from '~/logic/lib/util';
 import defaultApps from '~/logic/lib/default-apps';
 import {Associations, Contacts, Groups, Tile, Invites} from '~/types';
 import {useOutsideClick} from '~/logic/lib/useOutsideClick';
+import {Portal} from '../Portal';
 
 interface OmniboxProps {
   associations: Associations;
@@ -263,7 +264,8 @@ export function Omnibox(props: OmniboxProps) {
     </Box>;
   }, [results, navigate, selected, props.contacts, props.notifications, props.invites]);
 
-    return (
+  return (
+    <Portal>
         <Box
           backgroundColor='scales.black30'
           width='100%'
@@ -271,7 +273,7 @@ export function Omnibox(props: OmniboxProps) {
           position='absolute'
           top='0'
           right='0'
-          zIndex='9'
+          zIndex={11}
           display={props.show ? 'block' : 'none'}>
           <Row justifyContent='center'>
             <Box
@@ -292,6 +294,7 @@ export function Omnibox(props: OmniboxProps) {
             </Box>
           </Row>
         </Box>
+      </Portal>
     );
   }