From 6ed95a643b6f98f9a7b98c7c1b4226281056d1b3 Mon Sep 17 00:00:00 2001
From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com>
Date: Fri, 9 Aug 2024 13:21:09 +0300
Subject: [PATCH] Shared:ContextMenu:Fixed the scroll area in mobile view when
 the context menu cannot open to full height.

---
 .../context-menu/ContextMenu.styled.ts        |  4 ----
 .../components/context-menu/ContextMenu.tsx   |  2 ++
 .../context-menu/sub-components/SubMenu.tsx   | 24 +++++++++++++++----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts
index 66396014f4..13e0b61fb4 100644
--- a/packages/shared/components/context-menu/ContextMenu.styled.ts
+++ b/packages/shared/components/context-menu/ContextMenu.styled.ts
@@ -102,10 +102,6 @@ const StyledContextMenu = styled.div<{
       ${(props) => props.changeView && styledMobileView}
     }
 
-    @media ${mobile} {
-      ${(props) => props.changeView && styledMobileView}
-    }
-
     .scroll-body {
       display: flex;
       flex-direction: column;
diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx
index 4692a8d93d..c5b7b667db 100644
--- a/packages/shared/components/context-menu/ContextMenu.tsx
+++ b/packages/shared/components/context-menu/ContextMenu.tsx
@@ -550,6 +550,8 @@ const ContextMenu = React.forwardRef<ContextMenuRefType, ContextMenuProps>(
                   resetMenu={resetMenu}
                   onLeafClick={onLeafClick}
                   onMobileItemClick={onMobileItemClick}
+                  changeView={changeView}
+                  withHeader={withHeader}
                 />
               )}
             </div>
diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx
index bd87d213f6..fcbbbe005c 100644
--- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx
+++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx
@@ -64,8 +64,18 @@ const SubMenu = (props: {
     loadFunc?: () => Promise<ContextMenuModel[]>,
   ) => void;
   onLoad?: () => Promise<ContextMenuModel[]>;
+  changeView?: boolean;
+  withHeader?: boolean;
 }) => {
-  const { onLeafClick, root, resetMenu, onMobileItemClick, onLoad } = props;
+  const {
+    onLeafClick,
+    root,
+    resetMenu,
+    onMobileItemClick,
+    onLoad,
+    changeView,
+    withHeader,
+  } = props;
 
   const [model, setModel] = useState(props?.model);
   const [isLoading, setIsLoading] = useState(false);
@@ -519,11 +529,17 @@ const SubMenu = (props: {
   const viewport = DomHelpers.getViewport();
   const paddingList = 12;
   const marginsList = 32;
+  const backdrop = 64;
+  const header = 55;
 
   const listHeight =
-    height + paddingList + marginsList > viewport.height
-      ? viewport.height - marginsList
-      : height + paddingList;
+    changeView && withHeader
+      ? height + paddingList + header > viewport.height
+        ? viewport.height - backdrop - header - paddingList
+        : height + paddingList
+      : height + paddingList + marginsList > viewport.height
+        ? viewport.height - marginsList
+        : height + paddingList;
 
   if (model) {
     return (