responsive page panel and add-doctor

components/panel/userAccount/bank/head/index.js

@@ -1,4 +1,4 @@
-import ModalAddCard from "./modal/ModalAddCard";
+import ModalAddCard from "./modal";
 
 function Head() {
   return (

components/panel/userAccount/bank/head/modal/Form.js

@@ -11,7 +11,7 @@ const list = [
 
 function Form({ data, changeData }) {
   return (
-    <div className="mt-[40px] flex flex-col gap-[32px] px-[52px]">
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
       <ContentText text="شماره کارت">
         <EditField
           isTransparent={true}

components/panel/userAccount/bank/head/modal/index.js

@@ -19,10 +19,10 @@ function ModalAddCard() {
   const changeData = (value, name) => setData({ ...data, [name]: value });
 
   return (
-    <div>
+    <>
       {/* Button Modal */}
       <Button
-        className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
+        className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
         onClick={handleOpen}
         variant="contained"
       >
@@ -33,7 +33,7 @@ function ModalAddCard() {
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}
-          className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
+          className="!w-full !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
         >
           <div className="flex items-center justify-between w-full">
             <p className="text-[#3B3B3B] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
@@ -62,7 +62,7 @@ function ModalAddCard() {
           </div>
         </Box>
       </Modal>
-    </div>
+    </>
   );
 }