From 1a4288c81193475bd6f0936b175779d25141289a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 14 May 2026 18:21:32 +0800
Subject: [PATCH] fix: action btn is hidden if  there are many packages to
 install (#36176)

---
 .../install-plugin/install-bundle/__tests__/index.spec.tsx  | 6 ++++++
 .../plugins/install-plugin/install-bundle/index.tsx         | 2 +-
 .../install-bundle/steps/__tests__/install.spec.tsx         | 6 ++++++
 .../plugins/install-plugin/install-bundle/steps/install.tsx | 4 ++--
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/install-bundle/__tests__/index.spec.tsx b/web/app/components/plugins/install-plugin/install-bundle/__tests__/index.spec.tsx
index dd3d63aa32..8bd187129c 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/__tests__/index.spec.tsx
@@ -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} />)
 
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 0a1021591a..7f07ee2150 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -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">
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/__tests__/install.spec.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/__tests__/install.spec.tsx
index 3e848b35f4..ab6529fe86 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/__tests__/install.spec.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/__tests__/install.spec.tsx
@@ -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} />)
 
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index a94cd8588d..11f8784a64 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -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}