Merge pull request #188 from CSCfi/CSCFC4EMSCR-514_Fix-action-menu-z-…

…index CSCFC4EMSCR-514 Bring Actionmenu to front
CSCfi · Jun 26, 2024 · 780348c · 780348c
2 parents 79519e3 + a480345
commit 780348c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx b/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx
@@ -7,10 +7,15 @@ export const ActionMenuWrapper = styled.div`
   position: relative;
 `;
 
+export const ActionMenuContainer = styled.div`
+  position: relative;
+  z-index: 1;
+`;
+
 export const TestButton =  styled.div`
   margin-bottom: -40px;
   margin-top: 18px;
   margin-left: 20px;
   z-index: 200;
   position: relative;
-  `;
+  `;
diff --git a/mscr-ui/src/modules/crosswalk-editor/index.tsx b/mscr-ui/src/modules/crosswalk-editor/index.tsx
@@ -40,8 +40,9 @@ import MetadataStub from '@app/modules/form/metadata-form/metadata-stub';
 import { ActionMenuTypes, Type } from '@app/common/interfaces/search.interface';
 import SchemaAndCrosswalkActionMenu from '@app/common/components/schema-and-crosswalk-actionmenu';
 import {
+  ActionMenuContainer,
   ActionMenuWrapper,
-  TestButton,
+  TestButton
 } from '@app/modules/crosswalk-editor/crosswalk-editor.styles';
 import { setNotification } from '@app/common/components/notifications/notifications.slice';
 import { useStoreDispatch } from '@app/store';
@@ -561,7 +562,7 @@ export default function CrosswalkEditor({
             </CustomTabPanel>
             <CustomTabPanel value={selectedTab} index={2}>
             </CustomTabPanel>*/}
-            <div className="row d-flex h-0">
+            <ActionMenuContainer className="row d-flex h-0">
               <div className={selectedTab === 1 ? 'col-10' : 'd-none'}></div>
               <div
                 className={
@@ -591,7 +592,7 @@ export default function CrosswalkEditor({
                   </>
                 )}
               </div>
-            </div>
+            </ActionMenuContainer>
             <div className="row d-flex justify-content-between crosswalk-editor">
               {/*  LEFT COLUMN */}
               <div