#4069 Right-click context menu protrudes beyond edges of the Ketcher workspace

packages/ketcher-react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -24,7 +24,10 @@ export default function ButtonGroup<T>({
   );
 
   return (
-    <ToggleButtonGroup exclusive>
+    <ToggleButtonGroup
+      exclusive
+      style={{ overflowX: 'hidden', flexWrap: 'wrap' }}
+    >
       {buttons.map(({ label, value: buttonValue }) => (
         <ToggleButton
           data-testid={label + '-option'}
@@ -34,6 +37,7 @@ export default function ButtonGroup<T>({
           className={clsx(classes.button, {
             [classes.selected]: buttonValue === value,
           })}
+          style={{ flex: '1 0 25%', margin: '2px', borderRadius: '3px' }}
         >
           {label || 'none'}
         </ToggleButton>

packages/ketcher-react/src/script/ui/views/components/ContextMenu/ContextMenu.tsx

@@ -13,8 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
-
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Menu, MenuProps } from 'react-contexify';
 import 'react-contexify/ReactContexify.css';
 import { useAppContext } from 'src/hooks';
@@ -37,13 +36,36 @@ const props: Partial<MenuProps> = {
 const ContextMenu: React.FC = () => {
   const { getKetcherInstance } = useAppContext();
 
-  const resetMenuPosition = function () {
-    // This method checks that context menu is out of ketcher root element and move it
-    // to not display menu out of ketcher.
-    // It needs for cases when ketcher editor injected in popup
-    const contextMenuElement = document.querySelector(
-      '.contexify:last-of-type',
-    ) as HTMLDivElement | null;
+  const adjustSubmenuPosition = (submenuElement: HTMLElement) => {
+    const rect = submenuElement.getBoundingClientRect();
+    const ketcherRootElement = document.querySelector(
+      KETCHER_ROOT_NODE_CSS_SELECTOR,
+    );
+    const ketcherRootElementRect = ketcherRootElement?.getBoundingClientRect();
+    const ketcherEditorWidth = ketcherRootElementRect?.width || 0;
+    const ketcherEditorHeight = ketcherRootElementRect?.height || 0;
+    const ketcherEditorLeft = ketcherRootElementRect?.left || 0;
+    const ketcherEditorTop = ketcherRootElementRect?.top || 0;
+
+    if (rect.right - ketcherEditorLeft > ketcherEditorWidth) {
+      submenuElement.style.left = 'auto';
+      submenuElement.style.right = '100%';
+    } else {
+      submenuElement.style.left = '100%';
+      submenuElement.style.right = 'auto';
+    }
+
+    if (rect.bottom - ketcherEditorTop > ketcherEditorHeight) {
+      submenuElement.style.top = 'auto';
+      submenuElement.style.bottom = '0';
+    } else {
+      submenuElement.style.top = '0';
+      submenuElement.style.bottom = 'auto';
+    }
+  };
+
+  const resetMenuPosition = (menuElement: HTMLElement) => {
+    const contextMenuElement = menuElement;
     const ketcherRootElement = document.querySelector(
       KETCHER_ROOT_NODE_CSS_SELECTOR,
     );
@@ -56,24 +78,50 @@ const ContextMenu: React.FC = () => {
       contextMenuElement.getBoundingClientRect();
     const ketcherRootElementBoundingBox =
       ketcherRootElement.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
 
     if (!contextMenuElementBoundingBox || !ketcherRootElementBoundingBox) {
       return;
     }
 
-    const left =
+    let left = contextMenuElementBoundingBox.left;
+    let top = contextMenuElementBoundingBox.top;
+
+    // Ensure the menu is within the Ketcher root element
+    if (
       contextMenuElementBoundingBox.right > ketcherRootElementBoundingBox.right
-        ? contextMenuElementBoundingBox.x -
-          (contextMenuElementBoundingBox.right -
-            ketcherRootElementBoundingBox.right)
-        : contextMenuElementBoundingBox.x;
-    const top =
+    ) {
+      left =
+        ketcherRootElementBoundingBox.right -
+        contextMenuElementBoundingBox.width;
+    }
+
+    if (
       contextMenuElementBoundingBox.bottom >
       ketcherRootElementBoundingBox.bottom
-        ? contextMenuElementBoundingBox.y -
-          (contextMenuElementBoundingBox.bottom -
-            ketcherRootElementBoundingBox.bottom)
-        : contextMenuElementBoundingBox.y;
+    ) {
+      top =
+        ketcherRootElementBoundingBox.bottom -
+        contextMenuElementBoundingBox.height;
+    }
+
+    // Ensure the menu is within the viewport
+    if (left < 0) {
+      left = 0;
+    }
+
+    if (top < 0) {
+      top = 0;
+    }
+
+    if (contextMenuElementBoundingBox.right > viewportWidth) {
+      left = viewportWidth - contextMenuElementBoundingBox.width - 10;
+    }
+
+    if (contextMenuElementBoundingBox.bottom > viewportHeight) {
+      top = viewportHeight - contextMenuElementBoundingBox.height - 10;
+    }
 
     contextMenuElement.style.left = `${left}px`;
     contextMenuElement.style.top = `${top}px`;
@@ -84,7 +132,21 @@ const ContextMenu: React.FC = () => {
       const editor = getKetcherInstance().editor as Editor;
       if (visible) {
         editor.hoverIcon.hide();
-        resetMenuPosition();
+        const contextMenuElement = document.querySelector(
+          '.contexify:last-of-type',
+        ) as HTMLDivElement | null;
+        const submenuElements = document.querySelectorAll(
+          '.contexify_submenu',
+        ) as NodeListOf<HTMLElement>;
+        if (contextMenuElement) {
+          resetMenuPosition(contextMenuElement);
+        }
+
+        if (submenuElements.length) {
+          submenuElements.forEach((submenuElement) => {
+            adjustSubmenuPosition(submenuElement);
+          });
+        }
       }
       editor.contextMenu[id] = visible;
     },