handle scroll modal in page doctors

components/doctors/modal/FilterModal.js

@@ -17,15 +17,11 @@ function FilterModal({ data, setData, children }) {
       <div onClick={handleOpen}>{children}</div>
 
       {/* Content Modal */}
-      <Modal
-        open={open}
-        onClose={handleClose}
-        className=" !overflow-hidden !max-h-[calc(100vh-16px)]"
-      >
+      <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !my-[12px] overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between"
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <div className="flex justify-between w-full">

components/doctors/modal/Radios.js

@@ -15,6 +15,7 @@ function Radios({ group, value, changeData }) {
       {group.map((item, idx) => (
         <FormControlLabel
           control={<Radio className="!ml-2" />}
+          className="!text-[#525252]"
           label={item}
           value={idx}
           key={idx}