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%',