change(ui): modal height and scroll

frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import {Modal} from 'antd';
 import SelectCard from './SelectCard';
 import CreateCard from "Components/Dashboard/components/DashboardList/NewDashModal/CreateCard";
+import colors from "tailwindcss/colors";
 
 interface NewDashboardModalProps {
     onClose: () => void;
@@ -25,28 +26,35 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
 
     return (
         <>
-            <Modal 
-            open={open} 
-            onCancel={onClose} 
-            width={900} 
-            destroyOnClose={true} 
-            footer={null} 
-            closeIcon={false} 
-            className='chooseDashboardCards'
-            centered>
-                <div>
-                    <div className="flex flex-col gap-4">
-                        {step === 0 && <SelectCard onClose={onClose}
-                                                   selected={selectedCategory}
-                                                   setSelectedCategory={setSelectedCategory}
-                                                   onCard={() => setStep(step + 1)}
-                                                   isLibrary={isAddingFromLibrary}/>}
-                        {step === 1 && <CreateCard onBack={() => setStep(0)}/>}
-                    </div>
+            <Modal
+                open={open}
+                onCancel={onClose}
+                width={900}
+                destroyOnClose={true}
+                footer={null}
+                closeIcon={false}
+                styles={{
+                    content: {
+                        backgroundColor: colors.gray[100],
+                    }
+                }}
+            >
+                <div className="flex flex-col gap-4" style={{
+                    height: 700,
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                }}>
+                    {step === 0 && <SelectCard onClose={onClose}
+                                               selected={selectedCategory}
+                                               setSelectedCategory={setSelectedCategory}
+                                               onCard={() => setStep(step + 1)}
+                                               isLibrary={isAddingFromLibrary}/>}
+                    {step === 1 && <CreateCard onBack={() => setStep(0)}/>}
                 </div>
             </Modal>
         </>
-    );
+    )
+        ;
 };
 
 export default NewDashboardModal;

frontend/app/styles/general.css

@@ -412,14 +412,6 @@ p {
   background-color: #E6E9FA;
 }
 
-
-.chooseDashboardCards .ant-modal-content{
-  background-color: #efefef;
-  border-radius: 0.75rem;
-  max-height: 700px;
-  overflow: hidden;
-}
-
 .dashboardDataPeriodSelector .dashboardMoreOptionsLabel{
   display: none;
-}
+}