fix responsive all page & add modal doctor id & page dashboard aside

components/doctors/index.js

@@ -17,7 +17,7 @@ function DoctorsPage() {
     });
 
     return (
-        <div className="pt-[120px] padding-responsive">
+        <div className="pt-[95px] sm:pt-[120px] padding-responsive">
             <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
                 <div className="flex items-center justify-start gap-2 w-full">
                     <LocationD />

components/doctors/listDoctors/index.js

@@ -5,7 +5,7 @@ import ItemDoctor from '@/app/component/ItemDoctor';
 function ListDoctors() {
     return (
         <>
-            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[64px] gap-[24px]">
+            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px] gap-[24px]">
                 {doctors.map(doctor => (
                     <ItemDoctor
                         key={doctor.id}

components/doctors/search/index.js

@@ -54,7 +54,9 @@ function SearchBar({ data, setData }) {
                 className="!flex !m-1 !rounded-[4px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
                 !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
             >
-                <SearchD />
+                <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
+                    <SearchD />
+                </div>
             </Button>
         </ButtonGroup>
     )

components/doctors/sortlist/SelectSort.js

@@ -18,7 +18,7 @@ function SelectSort() {
             value={age}
             displayEmpty
             onChange={handleChange}
-            className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
+            className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
             renderValue={(value) => {
                 return (
                     <div className="w-[20px] flex gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
@@ -40,7 +40,7 @@ function SelectSort() {
                 },
                 '& .MuiOutlinedInput-notchedOutline ': {
                     borderColor: '#EFEFEF !important'
-                }
+                },
             }}
         >
             {listSort.map((item, idx) => (