diff --git a/ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-fasta.spec.ts-snapshots/Import-Saving-fasta-Files-Import-FASTA-Verif-f9feb--will-be-lost-on-export---we-do-not-store-it-2-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-fasta.spec.ts-snapshots/Import-Saving-fasta-Files-Import-FASTA-Verif-f9feb--will-be-lost-on-export---we-do-not-store-it-2-chromium-linux.png
index dba1bb763e..05a056b7dd 100644
Binary files a/ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-fasta.spec.ts-snapshots/Import-Saving-fasta-Files-Import-FASTA-Verif-f9feb--will-be-lost-on-export---we-do-not-store-it-2-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-fasta.spec.ts-snapshots/Import-Saving-fasta-Files-Import-FASTA-Verif-f9feb--will-be-lost-on-export---we-do-not-store-it-2-chromium-linux.png differ
diff --git a/packages/ketcher-macromolecules/src/Editor.tsx b/packages/ketcher-macromolecules/src/Editor.tsx
index 57fe55a340..a14e3f1ca4 100644
--- a/packages/ketcher-macromolecules/src/Editor.tsx
+++ b/packages/ketcher-macromolecules/src/Editor.tsx
@@ -302,11 +302,13 @@ function Editor({
+
+ setIsMonomerLibraryHidden((prev) => !prev)}
+ />
+
- setIsMonomerLibraryHidden((prev) => !prev)}
- />
diff --git a/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx b/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx
index 2c6f3a810e..2a9a5ede2e 100644
--- a/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx
+++ b/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx
@@ -22,15 +22,18 @@ interface LayoutProps {
children: JSX.Element | Array;
}
-const Column = styled.div<{ fullWidth?: boolean }>(({ fullWidth }) => ({
- width: fullWidth ? '100%' : 'fit-content',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-between',
-}));
+const Column = styled.div<{ fullWidth?: boolean; withPaddingRight?: boolean }>(
+ ({ fullWidth, withPaddingRight }) => ({
+ width: fullWidth ? '100%' : 'fit-content',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ paddingRight: withPaddingRight ? '12px' : 0,
+ }),
+);
const RowMain = styled.div(({ theme }) => ({
- height: '100vh',
+ height: '100%',
width: '100%',
position: 'relative',
padding: '12px',
@@ -38,8 +41,8 @@ const RowMain = styled.div(({ theme }) => ({
backgroundColor: theme.ketcher.color.background.canvas,
display: 'flex',
justifyContent: 'space-between',
- columnGap: '12px',
containerType: 'size',
+ overflow: 'hidden',
}));
const Row = styled.div(({ theme }) => ({
@@ -84,11 +87,13 @@ const Main = styled.div({
position: 'relative',
});
+const InsideRoot = styled.div({});
+
const DummyDiv = styled.div({
height: '40px',
});
-type LayoutSection = 'Left' | 'Right' | 'Main' | 'Top';
+type LayoutSection = 'Left' | 'Right' | 'Main' | 'Top' | 'InsideRoot';
export const Layout = ({ children }: LayoutProps) => {
const subcomponents: Record = {
@@ -96,6 +101,7 @@ export const Layout = ({ children }: LayoutProps) => {
Main: null,
Right: null,
Top: null,
+ InsideRoot: null,
};
React.Children.forEach(children, (child) => {
if (child.type === Left) {
@@ -106,12 +112,14 @@ export const Layout = ({ children }: LayoutProps) => {
subcomponents.Top = child;
} else if (child.type === Main) {
subcomponents.Main = child;
+ } else if (child.type === InsideRoot) {
+ subcomponents.InsideRoot = child;
}
});
return (
-
+
{subcomponents.Top}
{subcomponents.Left}
@@ -120,6 +128,7 @@ export const Layout = ({ children }: LayoutProps) => {
{subcomponents.Right}
+ {subcomponents.InsideRoot}
);
};
@@ -128,3 +137,4 @@ Layout.Left = Left;
Layout.Top = Top;
Layout.Right = Right;
Layout.Main = Main;
+Layout.InsideRoot = InsideRoot;