fix: use portal to make sure ellipsis menu opens on top of note list

app/assets/javascripts/components/NotesOptionsPanel.tsx

@@ -6,6 +6,7 @@ import {
   DisclosureButton,
   DisclosurePanel,
 } from '@reach/disclosure';
+import { Portal } from '@reach/portal';
 import MoreIcon from '../../icons/ic-more.svg';
 import { useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
@@ -55,27 +56,31 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
         <VisuallyHidden>Actions</VisuallyHidden>
         <MoreIcon className="fill-current block" />
       </DisclosureButton>
-      <DisclosurePanel
+      <Portal>
-        onKeyUp={(event) => {
+        <div className="sn-component">
-          if (event.key === 'Escape' && !submenuOpen) {
+          <DisclosurePanel
-            setOpen(false);
+            onKeyUp={(event) => {
-            buttonRef.current.focus();
+              if (event.key === 'Escape' && !submenuOpen) {
-          }
+                setOpen(false);
-        }}
+                buttonRef.current.focus();
-        ref={panelRef}
+              }
-        style={{
+            }}
-          ...position,
+            ref={panelRef}
-        }}
+            style={{
-        className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2"
+              ...position,
-      >
+            }}
-        {open && (
+            className="sn-dropdown flex flex-col py-2"
-          <NotesOptions
+          >
-            appState={appState}
+            {open && (
-            closeOnBlur={closeOnBlur}
+              <NotesOptions
-            onSubmenuChange={onSubmenuChange}
+                appState={appState}
-          />
+                closeOnBlur={closeOnBlur}
-        )}
+                onSubmenuChange={onSubmenuChange}
-      </DisclosurePanel>
+              />
+            )}
+          </DisclosurePanel>
+        </div>
+      </Portal>
     </Disclosure>
   );
 });