fix: action btn is hidden if there are many packages to install (#36176)

This commit is contained in:
Joel 2026-05-14 18:21:32 +08:00 committed by GitHub
parent 9dc32f2318
commit 1a4288c811
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 3 deletions

View File

@ -261,6 +261,12 @@ describe('InstallBundle', () => {
expect(screen.getByText('plugin.installModal.installPlugin')).toBeInTheDocument()
})
it('should constrain modal height to the viewport', () => {
render(<InstallBundle {...defaultProps} />)
expect(screen.getByText('plugin.installModal.installPlugin').parentElement?.parentElement).toHaveClass('max-h-[calc(100dvh-48px)]')
})
it('should render ReadyToInstall component', () => {
render(<InstallBundle {...defaultProps} />)

View File

@ -57,7 +57,7 @@ const InstallBundle: FC<Props> = ({
foldAnimInto()
}}
>
<DialogContent className={cn('w-full max-w-[480px] overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
<DialogContent className={cn('w-full max-w-[480px] overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
<DialogCloseButton />
<div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">

View File

@ -265,6 +265,12 @@ describe('Install Component', () => {
expect(screen.getByTestId('all-plugins-count')).toHaveTextContent('2')
})
it('should make the plugin list scrollable inside the modal body', () => {
render(<Install {...defaultProps} />)
expect(screen.getByTestId('install-multi').parentElement).toHaveClass('overflow-y-auto')
})
it('should show singular text when one plugin is selected', async () => {
render(<Install {...defaultProps} />)

View File

@ -171,11 +171,11 @@ const Install: FC<Props> = ({
const { canInstallPluginFromMarketplace } = useCanInstallPluginFromMarketplace()
return (
<>
<div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
<div className="flex min-h-0 flex-1 flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
<div className="system-md-regular text-text-secondary">
<p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { ns: 'plugin', num: selectedPluginsNum })}</p>
</div>
<div className="w-full space-y-1 rounded-2xl bg-background-section-burn p-2">
<div className="flex min-h-0 w-full flex-1 flex-col gap-1 overflow-y-auto rounded-2xl bg-background-section-burn p-2">
<InstallMulti
ref={installMultiRef}
allPlugins={allPlugins}