The headless ui dialog causes too many focus problems to keep it in. …

…We'll need to look for an alternative.

src/dashboard/view/Modal.module.scss

@@ -1,5 +1,5 @@
 .root {
-  position: absolute;
+  position: fixed;
   inset: 0;
   z-index: 4;
   padding: 20px 30px;

src/dashboard/view/Modal.tsx

@@ -1,40 +1,31 @@
-import {Dialog} from '@headlessui/react'
 import {IconButton} from 'alinea/dashboard/view/IconButton'
 import {IcRoundClose} from 'alinea/ui/icons/IcRoundClose'
 import {fromModule} from 'alinea/ui/util/Styler'
-import {ComponentPropsWithoutRef, PropsWithChildren, useRef} from 'react'
+import {PropsWithChildren, useRef} from 'react'
 import css from './Modal.module.scss'
 
 const styles = fromModule(css)
 
-export type ModalProps = PropsWithChildren<
-  {
-    open?: boolean
-    onClose: () => void
-    className?: string
-  } & ComponentPropsWithoutRef<typeof Dialog>
->
+export type ModalProps = PropsWithChildren<{
+  open?: boolean
+  onClose: () => void
+  className?: string
+}>
 export function Modal({children, ...props}: ModalProps) {
   const modalRef = useRef(null)
-
+  if (!props.open) return null
   return (
-    <Dialog
-      {...props}
-      open={Boolean(props.open)}
-      ref={modalRef}
-      initialFocus={modalRef}
-      className={styles.root({open: props.open})}
-    >
+    <div {...props} ref={modalRef} className={styles.root({open: props.open})}>
       <div className={styles.root.background()} onClick={props.onClose}></div>
-      <Dialog.Panel className={styles.root.inner.mergeProps(props)()}>
+      <div className={styles.root.inner.mergeProps(props)()}>
         {children}
         <IconButton
           className={styles.root.inner.close()}
           size={18}
           icon={IcRoundClose}
           onClick={props.onClose}
         />
-      </Dialog.Panel>
-    </Dialog>
+      </div>
+    </div>
   )
 }