From e4d70239f63d8cc112376aacb9361b1ed9641c2f Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 18 May 2021 10:26:17 -0300
Subject: [PATCH] fix: use portal to make sure ellipsis menu opens on top of
 note list

---
 .../components/NotesOptionsPanel.tsx          | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index e155e2215..8759494c9 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/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
-        onKeyUp={(event) => {
-          if (event.key === 'Escape' && !submenuOpen) {
-            setOpen(false);
-            buttonRef.current.focus();
-          }
-        }}
-        ref={panelRef}
-        style={{
-          ...position,
-        }}
-        className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2"
-      >
-        {open && (
-          <NotesOptions
-            appState={appState}
-            closeOnBlur={closeOnBlur}
-            onSubmenuChange={onSubmenuChange}
-          />
-        )}
-      </DisclosurePanel>
+      <Portal>
+        <div className="sn-component">
+          <DisclosurePanel
+            onKeyUp={(event) => {
+              if (event.key === 'Escape' && !submenuOpen) {
+                setOpen(false);
+                buttonRef.current.focus();
+              }
+            }}
+            ref={panelRef}
+            style={{
+              ...position,
+            }}
+            className="sn-dropdown flex flex-col py-2"
+          >
+            {open && (
+              <NotesOptions
+                appState={appState}
+                closeOnBlur={closeOnBlur}
+                onSubmenuChange={onSubmenuChange}
+              />
+            )}
+          </DisclosurePanel>
+        </div>
+      </Portal>
     </Disclosure>
   );
 });