chore: Improved context menu behavior

app/components/ContextMenu/index.js

@@ -37,7 +37,7 @@ export default function ContextMenu({
   }, [onOpen, onClose, previousVisible, rest.visible]);
 
   return (
-    <Menu {...rest}>
+    <Menu hideOnClickOutside preventBodyScroll {...rest}>
       {(props) => (
         <Position {...props}>
           <Background>

app/menus/DocumentMenu.js

@@ -54,7 +54,12 @@ function DocumentMenu({
 }: Props) {
   const team = useCurrentTeam();
   const { policies, collections, ui, documents } = useStores();
-  const menu = useMenuState({ modal });
+  const menu = useMenuState({
+    modal,
+    unstable_preventOverflow: true,
+    unstable_fixed: true,
+    unstable_flip: true,
+  });
   const history = useHistory();
   const { t } = useTranslation();
   const [renderModals, setRenderModals] = React.useState(false);

shared/i18n/locales/en_US/translation.json

@@ -243,9 +243,9 @@
   "Collections are for grouping your documents. They work best when organized around a topic or internal team — Product or Engineering for example.": "Collections are for grouping your documents. They work best when organized around a topic or internal team — Product or Engineering for example.",
   "Creating": "Creating",
   "Create": "Create",
-  "Edit {{noun}}": "Edit {{noun}}",
   "Hide contents": "Hide contents",
   "Show contents": "Show contents",
+  "Edit {{noun}}": "Edit {{noun}}",
   "Archived": "Archived",
   "Anyone with the link <1></1>can view this document": "Anyone with the link <1></1>can view this document",
   "Share": "Share",