fix menu hiddenBottom

polkadot-cloud · Mar 5, 2024 · d986aff · d986aff
1 parent 31c0781
commit d986aff
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 29 deletions.
diff --git a/src/contexts/Menu/index.tsx b/src/contexts/Menu/index.tsx
@@ -67,8 +67,8 @@ export const MenuProvider = ({ children }: { children: ReactNode }) => {
     // position.
     const bodyRect = document.body.getBoundingClientRect();
     const menuRect = ref.current.getBoundingClientRect();
-    const hiddenRight = menuRect.right > bodyRect.right;
-    const hiddenBottom = menuRect.bottom > bodyRect.bottom;
+    const hiddenRight = menuRect.right > bodyRect.right - DocumentPadding;
+    const hiddenBottom = menuRect.bottom > bodyRect.bottom - DocumentPadding;
 
     const x = hiddenRight
       ? window.innerWidth - menuRect.width - DocumentPadding

diff --git a/src/library/ContextMenu/Wrappers.ts b/src/library/ContextMenu/Wrappers.ts
@@ -5,17 +5,21 @@ import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
 export const Wrapper = styled(motion.div)`
-  border: 1px solid var(--border-secondary-color);
-  background: var(--background-default);
-  border-radius: 0.4rem;
-  display: flex;
-  flex-flow: column wrap;
-  /* TODO: make theme variable + dark mode support */
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.07),
-    0 2px 4px -2px rgba(0, 0, 0, 0.07);
-
   width: 256px;
+
+  > .inner {
+    border: 1px solid var(--border-secondary-color);
+    background: var(--background-default);
+    border-radius: 0.4rem;
+    display: flex;
+    flex-flow: column wrap;
+    /* TODO: make theme variable + dark mode support */
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.07),
+      0 2px 4px -2px rgba(0, 0, 0, 0.07);
+
+    width: 100%;
+  }
 `;
 
 export const ListWrapper = styled.ul`

diff --git a/src/library/ContextMenu/index.tsx b/src/library/ContextMenu/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useMenu } from 'contexts/Menu';
 import { Wrapper } from './Wrappers';
 import { useOutsideAlerter } from 'hooks/useOutsideAlerter';
+import { motion } from 'framer-motion';
 
 export const ContextMenu = () => {
   const {
@@ -58,30 +59,35 @@ export const ContextMenu = () => {
     open && (
       <Wrapper
         ref={menuRef}
-        animate={!hidden ? 'show' : 'hidden'}
-        variants={{
-          hidden: {
-            opacity: 0,
-            transform: 'scale(0.93)',
-          },
-          show: {
-            opacity: 1,
-            transform: 'scale(1)',
-          },
-        }}
-        transition={{
-          duration: TRANSITION_DURATION_MS * 0.001,
-          ease: [0.1, 1, 0.1, 1],
-        }}
+        onAnimationComplete={() => checkMenuPosition(menuRef)}
         style={{
           position: 'absolute',
           left: `${x}px`,
           top: `${y}px`,
-          zIndex: 999,
           opacity: show ? 1 : 0,
+          zIndex: 99,
         }}
       >
-        {inner}
+        <motion.div
+          animate={!hidden ? 'show' : 'hidden'}
+          variants={{
+            hidden: {
+              opacity: 0,
+              transform: 'scale(0.93)',
+            },
+            show: {
+              opacity: 1,
+              transform: 'scale(1)',
+            },
+          }}
+          transition={{
+            duration: TRANSITION_DURATION_MS * 0.001,
+            ease: [0.1, 1, 0.1, 1],
+          }}
+          className="inner"
+        >
+          {inner}
+        </motion.div>
       </Wrapper>
     )
   );