#4352 - Macro: Gap between button and drop-down list of Macro modes

epam · Oct 17, 2024 · 2b8f86f · 2b8f86f
1 parent 946ccdb
commit 2b8f86f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/packages/ketcher-macromolecules/src/components/LayoutModeButton/LayoutModeButton.tsx b/packages/ketcher-macromolecules/src/components/LayoutModeButton/LayoutModeButton.tsx
@@ -55,6 +55,7 @@ export const LayoutModeButton = () => {
         testId="layout-mode"
         vertical={true}
         needOpenByMenuItemClick={true}
+        layoutModeButton={true}
       >
         <Menu.Item
           itemId="sequence-layout-mode"

diff --git a/packages/ketcher-macromolecules/src/components/menu/subMenu/SubMenu.tsx b/packages/ketcher-macromolecules/src/components/menu/subMenu/SubMenu.tsx
@@ -31,6 +31,7 @@ type SubMenuProps = {
   disabled?: boolean;
   needOpenByMenuItemClick?: boolean;
   testId?: string;
+  layoutModeButton?: boolean;
 };
 
 const SubMenu = ({
@@ -39,6 +40,7 @@ const SubMenu = ({
   disabled = false,
   needOpenByMenuItemClick = false,
   testId,
+  layoutModeButton = false,
 }: React.PropsWithChildren<SubMenuProps>) => {
   const [open, setOpen] = useState(false);
   const { isActive } = useMenuContext();
@@ -98,7 +100,10 @@ const SubMenu = ({
         onClick={hideCollapse}
       >
         <ClickAwayListener onClickAway={hideCollapse}>
-          <OptionsContainer isVertical={vertical}>
+          <OptionsContainer
+            isVertical={vertical}
+            islayoutModeButton={layoutModeButton}
+          >
             {subComponents.map((component) => component)}
           </OptionsContainer>
         </ClickAwayListener>

diff --git a/packages/ketcher-macromolecules/src/components/menu/subMenu/styles.ts b/packages/ketcher-macromolecules/src/components/menu/subMenu/styles.ts
@@ -51,7 +51,8 @@ export const OptionsContainer = styled.div<OptionsContainerProps>`
   display: flex;
   position: absolute;
   left: ${({ isVertical }) => (isVertical ? '-34px' : '5px')};
-  top: ${({ isVertical }) => (isVertical ? '38px' : '0')};
+  top: ${({ isVertical, islayoutModeButton }) =>
+    isVertical && islayoutModeButton ? '24px' : isVertical ? '38px' : '0px'};
   border-radius: 4px;
   flex-direction: ${({ isVertical }) => (isVertical ? 'column' : 'row')};
   height: 100px;

diff --git a/packages/ketcher-macromolecules/src/components/menu/subMenu/types.ts b/packages/ketcher-macromolecules/src/components/menu/subMenu/types.ts
@@ -20,4 +20,5 @@ export interface IStyledDropdownIconProps {
 
 export type OptionsContainerProps = {
   isVertical?: boolean;
+  islayoutModeButton?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;