| }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections]) | }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections]) | ||||
| return ( | return ( | ||||
| <div className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'> | |||||
| <div | |||||
| style={{ scrollbarGutter: 'stable' }} | |||||
| className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'> | |||||
| { | { | ||||
| plugins && ( | plugins && ( | ||||
| <div className='flex items-center mb-4 pt-3'> | <div className='flex items-center mb-4 pt-3'> |
| <div | <div | ||||
| id='marketplace-container' | id='marketplace-container' | ||||
| ref={containerRef} | ref={containerRef} | ||||
| style={{ scrollbarGutter: 'stable' }} | |||||
| className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins' | className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins' | ||||
| ? 'rounded-t-xl bg-components-panel-bg' | ? 'rounded-t-xl bg-components-panel-bg' | ||||
| : 'bg-background-body', | : 'bg-background-body', |