From 6341140e9d001d660a11d209ddf0c19e98717b74 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Thu, 26 Oct 2023 08:48:17 +0200
Subject: [PATCH] refactor: wrap InstallForm in ScrollArea component

---
 .../[id]/components/InstallModal/InstallModal.tsx        | 9 ++++++---
 .../UpdateSettingsModal/UpdateSettingsModal.tsx          | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/(dashboard)/app-store/[id]/components/InstallModal/InstallModal.tsx b/src/app/(dashboard)/app-store/[id]/components/InstallModal/InstallModal.tsx
index 5f805c73..94d2677c 100644
--- a/src/app/(dashboard)/app-store/[id]/components/InstallModal/InstallModal.tsx
+++ b/src/app/(dashboard)/app-store/[id]/components/InstallModal/InstallModal.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader } from '@/components/ui/Dialog';
 import { useTranslations } from 'next-intl';
 import { AppInfo } from '@runtipi/shared';
+import { ScrollArea } from '@/components/ui/ScrollArea';
 import { InstallForm, FormValues } from '../InstallForm';
 
 interface IProps {
@@ -20,9 +21,11 @@ export const InstallModal: React.FC<IProps> = ({ info, isOpen, onClose, onSubmit
         <DialogHeader>
           <h5 className="modal-title">{t('title', { name: info.name })}</h5>
         </DialogHeader>
-        <DialogDescription>
-          <InstallForm onSubmit={onSubmit} formFields={info.form_fields} info={info} />
-        </DialogDescription>
+        <ScrollArea maxHeight={500}>
+          <DialogDescription>
+            <InstallForm onSubmit={onSubmit} formFields={info.form_fields} info={info} />
+          </DialogDescription>
+        </ScrollArea>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/(dashboard)/app-store/[id]/components/UpdateSettingsModal/UpdateSettingsModal.tsx b/src/app/(dashboard)/app-store/[id]/components/UpdateSettingsModal/UpdateSettingsModal.tsx
index e1489d3f..cd168bd3 100644
--- a/src/app/(dashboard)/app-store/[id]/components/UpdateSettingsModal/UpdateSettingsModal.tsx
+++ b/src/app/(dashboard)/app-store/[id]/components/UpdateSettingsModal/UpdateSettingsModal.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader } from '@/components/ui/Dialog';
 import { useTranslations } from 'next-intl';
 import { AppInfo } from '@runtipi/shared';
+import { ScrollArea } from '@/components/ui/ScrollArea';
 import { InstallForm, type FormValues } from '../InstallForm';
 
 interface IProps {
@@ -23,9 +24,11 @@ export const UpdateSettingsModal: React.FC<IProps> = ({ info, config, isOpen, on
         <DialogHeader>
           <h5 className="modal-title">{t('title', { name: info.name })}</h5>
         </DialogHeader>
-        <DialogDescription>
-          <InstallForm onSubmit={onSubmit} formFields={info.form_fields} info={info} initalValues={{ ...config, exposed, domain }} />
-        </DialogDescription>
+        <ScrollArea maxHeight={500}>
+          <DialogDescription>
+            <InstallForm onSubmit={onSubmit} formFields={info.form_fields} info={info} initalValues={{ ...config, exposed, domain }} />
+          </DialogDescription>
+        </ScrollArea>
       </DialogContent>
     </Dialog>
   );