studio: fix context menu (#10475)

* dont overflow menu on the right side of the screen

* use anchor el if provided

* revert Toolbar2

* pass copy

* add anchorEl as an additional prop

* revert anchorEvent.set

* cleanup

---------

Co-authored-by: aditya-mitra <[email protected]>

packages/ui/src/components/editor/layout/ContextMenu.tsx

@@ -33,6 +33,7 @@ type ContextMenuProps = {
   anchorPosition?: undefined | { left: number; top: number }
   onClose: () => void
   className?: string
+  anchorEl?: HTMLElement
 }
 
 export const ContextMenu = ({
@@ -41,12 +42,15 @@ export const ContextMenu = ({
   panelId,
   anchorPosition: propAnchorPosition,
   onClose,
-  className
+  className,
+  ...prop
 }: React.PropsWithChildren<ContextMenuProps>) => {
   const [open, setOpen] = React.useState(false)
   const panel = document.getElementById(panelId)
   const menuRef = useRef<HTMLDivElement | null>(null)
 
+  const { anchorEl } = prop
+
   // use custom anchorPosition if explicity provided, otherwise use default anchor position when anchorEvent is defined
   const anchorPosition = propAnchorPosition
     ? propAnchorPosition
@@ -59,7 +63,12 @@ export const ContextMenu = ({
 
   // Calculate the Y position of the context menu based on the menu height and space to the bottom of the viewport in order to avoid overflow
   const calculatePositionY = () => {
-    let positionY = anchorPosition ? anchorPosition.top - panel?.getBoundingClientRect().top! : 0
+    let positionY = anchorPosition
+      ? anchorPosition.top - panel?.getBoundingClientRect().top!
+      : anchorEl
+      ? anchorEl.getBoundingClientRect().bottom!
+      : 0
+    // let positionY =
 
     if (open && menuRef.current) {
       const menuHeight = menuRef.current.offsetHeight
@@ -69,14 +78,28 @@ export const ContextMenu = ({
       if (offset < 0) {
         positionY = positionY + offset
       }
+
+      const viewportHeight = window.innerHeight
+
+      // Adjust Y position to avoid overflow
+      if (positionY + menuHeight > viewportHeight) {
+        positionY = viewportHeight - menuHeight - 10 // 10px for padding
+      }
+      if (positionY < 0) {
+        positionY = 10 // 10px for padding
+      }
     }
 
     return positionY
   }
 
   // Calculate the X position of the context menu based on the menu width and space to the right of the panel in order to avoid overflow
   const calculatePositionX = () => {
-    let positionX = anchorPosition ? anchorPosition.left - panel?.getBoundingClientRect().left! : 0
+    let positionX = anchorPosition
+      ? anchorPosition.left - panel?.getBoundingClientRect().left!
+      : anchorEl
+      ? anchorEl.getBoundingClientRect().left!
+      : 0
 
     if (open && menuRef.current) {
       const menuWidth = menuRef.current.offsetWidth
@@ -86,6 +109,16 @@ export const ContextMenu = ({
       if (offset < 0) {
         positionX = positionX + offset
       }
+
+      const viewportWidth = window.innerWidth
+
+      // Adjust X position to avoid overflow
+      if (positionX + menuWidth > viewportWidth) {
+        positionX = viewportWidth - menuWidth - 10 // 10px for padding
+      }
+      if (positionX < 0) {
+        positionX = 10 // 10px for padding
+      }
     }
 
     return positionX