styles: more exact dialog pos to remove jump

pkg/grid/src/nav/Nav.tsx

@@ -85,11 +85,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
   const dialogNavRef = useRef<HTMLDivElement>(null);
   const [systemMenuOpen, setSystemMenuOpen] = useState(false);
   const [dialogContentOpen, setDialogContentOpen] = useState(false);
-  const { selection, select } = useLeapStore((state) => ({
-    selectedMatch: state.selectedMatch,
-    selection: state.selection,
-    select: state.select
-  }));
+  const select = useLeapStore((state) => state.select);
 
   const menuState = menu || 'closed';
   const isOpen = menuState !== 'closed';
@@ -99,10 +95,8 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
     if (!isOpen) {
       select(null);
       setDialogContentOpen(false);
-    } else {
-      inputRef.current?.focus();
     }
-  }, [selection, isOpen]);
+  }, [isOpen]);
 
   const onOpen = useCallback(
     (event: Event) => {
@@ -124,6 +118,15 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
     }
   }, []);
 
+  const disableCloseWhenDropdownOpen = useCallback(
+    (e: Event) => {
+      if (systemMenuOpen) {
+        e.preventDefault();
+      }
+    },
+    [systemMenuOpen]
+  );
+
   return (
     <>
       <Portal.Root
@@ -133,6 +136,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
         <SystemMenu
           open={systemMenuOpen}
           setOpen={setSystemMenuOpen}
+          showOverlay={!isOpen}
           className={classNames('relative z-50 flex-none', eitherOpen ? 'bg-white' : 'bg-gray-100')}
         />
         <Link
@@ -163,7 +167,8 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
       <Dialog open={isOpen} onOpenChange={onDialogClose}>
         <DialogContent
           onOpenAutoFocus={onOpen}
-          className="fixed bottom-0 sm:top-0 left-[calc(50%-7.5px)] flex flex-col w-[calc(100%-15px)] max-w-3xl px-4 text-gray-400 -translate-x-1/2 outline-none"
+          onInteractOutside={disableCloseWhenDropdownOpen}
+          className="fixed bottom-0 sm:top-0 scroll-left-50 flex flex-col scroll-full-width max-w-3xl px-4 text-gray-400 -translate-x-1/2 outline-none"
           role="combobox"
           aria-controls="leap-items"
           aria-owns="leap-items"

pkg/grid/src/styles/utilities.css

@@ -0,0 +1,7 @@
+.scroll-full-width {
+  width: calc(100% - var(--removed-body-scroll-bar-size));
+}
+
+.scroll-left-50 {
+  left: calc(50% - (var(--removed-body-scroll-bar-size) / 2));
+}