better modal breakpoint

src/core/components/CustomModal.tsx

@@ -8,21 +8,21 @@ interface ICustomModalProps {
   isOpen: boolean;
   setIsOpen: Dispatcher<boolean>;
   children: React.ReactNode;
-  customStyle: { backgroundColor?: string; padding?: string };
+  customStyle: { backgroundColor?: string; padding?: string; width?: string };
 }
 
 const useStyles = makeStyles((theme) => ({
-  modal: {
+  modal: (customStyle: ICustomModalProps['customStyle']) => ({
     backgroundColor: 'transparent',
     margin: '7% auto',
     padding: 'none',
     border: 'none',
-    width: '85%',
-    [theme.breakpoints.down('sm')]: {
+    width: customStyle.width || '85%',
+    [theme.breakpoints.down(700)]: {
       margin: '3% auto',
       width: '95%',
     },
-  },
+  }),
   modalContent: (customStyle: ICustomModalProps['customStyle']) => ({
     ...{
       backgroundColor: customStyle.backgroundColor || 'theme.palette.background.paper',

src/core/components/ProfileModal.tsx

@@ -14,7 +14,7 @@ export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
     <CustomModal
       isOpen={isOpen}
       setIsOpen={setIsOpen}
-      customStyle={{ backgroundColor: 'white', padding: '10px' }}
+      customStyle={{ backgroundColor: 'white', padding: '10px', width: '650px' }}
     >
       {placeHolder}
     </CustomModal>