From 4f0ee2c3f86653e23ce99c692a0a9438d9156389 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 3 Mar 2022 22:40:12 -0800
Subject: [PATCH] fix: No reserved space for submenu arrow fix: Submenu arrow
 miss-positioned when menu is scrollable closes #3191

---
 app/components/ContextMenu/MenuItem.tsx | 10 ++++++++--
 app/components/ContextMenu/Template.tsx |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx
index 59416e54b..c1354f798 100644
--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -93,11 +93,14 @@ const Spacer = styled.svg`
   flex-shrink: 0;
 `;
 
-export const MenuAnchorCSS = css<{
+type MenuAnchorProps = {
   level?: number;
   disabled?: boolean;
   dangerous?: boolean;
-}>`
+  disclosure?: boolean;
+};
+
+export const MenuAnchorCSS = css<MenuAnchorProps>`
   display: flex;
   margin: 0;
   border: 0;
@@ -114,6 +117,7 @@ export const MenuAnchorCSS = css<{
   cursor: default;
   user-select: none;
   white-space: nowrap;
+  position: relative;
 
   svg:not(:last-child) {
     margin-right: 4px;
@@ -145,6 +149,8 @@ export const MenuAnchorCSS = css<{
 
   ${breakpoint("tablet")`
     padding: 4px 12px;
+    padding-right: ${(props: MenuAnchorProps) =>
+      props.disclosure ? 32 : 12}px;
     font-size: 14px;
   `};
 `;
diff --git a/app/components/ContextMenu/Template.tsx b/app/components/ContextMenu/Template.tsx
index 185fd77da..541a18176 100644
--- a/app/components/ContextMenu/Template.tsx
+++ b/app/components/ContextMenu/Template.tsx
@@ -53,7 +53,7 @@ const Submenu = React.forwardRef(
       <>
         <MenuButton ref={ref} {...menu} {...rest}>
           {(props) => (
-            <MenuAnchor {...props}>
+            <MenuAnchor disclosure {...props}>
               {title} <Disclosure color={theme.textTertiary} />
             </MenuAnchor>
           )}