From d84ff1f7e0b9f62150dee12a1d1167023836d74a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 1 Jul 2024 13:32:19 +0200
Subject: [PATCH] change(ui): card create modal height

---
 .../NewDashModal/NewDashboardModal.tsx        | 97 ++++++++++---------
 1 file changed, 49 insertions(+), 48 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
index 5c975a9d1..a30db5c9d 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
@@ -1,60 +1,61 @@
-import React, {useEffect} from 'react';
-import {Modal} from 'antd';
+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";
+import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard';
+import colors from 'tailwindcss/colors';
 
 interface NewDashboardModalProps {
-    onClose: () => void;
-    open: boolean;
-    isAddingFromLibrary?: boolean;
+  onClose: () => void;
+  open: boolean;
+  isAddingFromLibrary?: boolean;
 }
 
 const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
-                                                                 onClose,
-                                                                 open,
-                                                                 isAddingFromLibrary = false,
+                                                               onClose,
+                                                               open,
+                                                               isAddingFromLibrary = false
                                                              }) => {
-    const [step, setStep] = React.useState<number>(0);
-    const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
+  const [step, setStep] = React.useState<number>(0);
+  const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
 
-    useEffect(() => {
-        return () => {
-            setStep(0);
-        }
-    }, [open]);
+  useEffect(() => {
+    return () => {
+      setStep(0);
+    };
+  }, [open]);
 
-    return (
-        <>
-            <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>
-        </>
-    )
-        ;
+  return (
+    <>
+      <Modal
+        open={open}
+        onCancel={onClose}
+        width={900}
+        destroyOnClose={true}
+        footer={null}
+        closeIcon={false}
+        styles={{
+          content: {
+            backgroundColor: colors.gray[100]
+          }
+        }}
+        centered={true}
+      >
+        <div className="flex flex-col gap-4" style={{
+          height: 'calc(100vh - 100px)',
+          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;