diff --git a/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx b/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx
index 23d184b008..5902ff981c 100644
--- a/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx
+++ b/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx
@@ -34,6 +34,7 @@ import {
DisabledArea,
RnaAccordionContainer,
StyledAccordion,
+ StyledAccordionWrapper,
StyledButton,
} from './styles';
import { Summary } from './Summary';
@@ -219,7 +220,22 @@ export const RnaAccordion = ({ libraryName }) => {
})}
);
- return (
+ const presetsExpanded =
+ groupData.groupName === RnaBuilderPresetsItem.Presets && expanded;
+
+ return presetsExpanded ? (
+
+
+ handleAccordionSummaryClick(groupData.groupName)
+ }
+ />
+
+ ) : (
{groupName} ({quantity})
-
+
);
};
diff --git a/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/styles.ts b/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/styles.ts
index 3d88040ff0..7be81d89e0 100644
--- a/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/styles.ts
+++ b/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/styles.ts
@@ -22,12 +22,18 @@ export const RnaAccordionContainer = styled.div({
flexDirection: 'column',
justifyContent: 'flex-end',
overflow: 'hidden',
+ height: '100%',
});
export const StyledAccordion = styled(Accordion)({
minHeight: '32px',
});
+export const StyledAccordionWrapper = styled.div({
+ flexGrow: 2,
+ minHeight: '32px',
+});
+
export const DetailsContainer = styled.div({
position: 'relative',
width: '100%',