change space between field and text && change type fields

app/component/EditField.js

@@ -49,19 +49,21 @@ function EditField({
               transition: "0.5s all",
             },
           },
+          "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+            {
+              display: "none",
+            },
         }}
       />
-      {!type && (
-        <Button
-          className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+      <Button
+        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
                     ${multiline ? "!top-[24px]" : "!top-1/2"}`}
-          onClick={() => {
-            // changeData(!data.isEdit, "isEdit", name);
-          }}
-        >
-          {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
-        </Button>
-      )}
+        onClick={() => {
+          // changeData(!data.isEdit, "isEdit", name);
+        }}
+      >
+        {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
+      </Button>
     </div>
   );
 }

app/component/ProfressDetail.js

@@ -4,7 +4,7 @@ import { LinearProgress } from "@mui/material";
 function ProgressDetail({ data }) {
   return (
     <li className="flex items-center justify-start gap-2 w-full">
-      <p className="text-[#525252] text-[14px] font-normal w-[118px]">
+      <p className="text-[#525252] text-[14px] font-normal min-w-[120px] w-[118px]">
         {data.label}
       </p>
       <LinearProgress

app/component/ProgressChange.js

@@ -6,7 +6,7 @@ function ProgressChange({ data }) {
 
   return (
     <li className="flex items-center justify-start gap-3 w-full">
-      <p className="text-[#525252] text-[14px] font-normal w-[118px]">
+      <p className="text-[#525252] text-[14px] font-normal w-[118px] min-w-[120px]">
         {data.label}
       </p>
       <Slider
@@ -32,7 +32,9 @@ function ProgressChange({ data }) {
           },
         }}
       />
-      <p className="text-[#525252] text-[20px] font-medium w-[30px]">{value}</p>
+      <p className="text-[#525252] text-[20px] font-medium w-[30px] min-w-[32px]">
+        {value}
+      </p>
     </li>
   );
 }

components/dashboard/userAccount/tabs/detailUser/Content.js

@@ -1,6 +1,6 @@
 function Content({ isConfirmed, children, title }) {
   return (
-    <div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
+    <div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[3px] md:gap-[7px] lg:gap-[9px]">
       <div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
         <p className="text-[#525252] text-[14px] font-medium">{title}</p>
         {isConfirmed && (

components/dashboard/userAccount/tabs/detailUser/Form.js

@@ -18,6 +18,7 @@ function Form({ data, changeData, updateSelect }) {
         <EditField
           isTransparent={true}
           iconGray={true}
+          type="number"
           changeData={changeData}
           data={data?.phone}
           name="phone"
@@ -27,6 +28,7 @@ function Form({ data, changeData, updateSelect }) {
         <EditField
           isTransparent={true}
           iconGray={true}
+          type="number"
           changeData={changeData}
           data={data?.national_code}
           name="national_code"
@@ -77,6 +79,7 @@ function Form({ data, changeData, updateSelect }) {
         <EditField
           isTransparent={true}
           iconGray={true}
+          type="number"
           changeData={changeData}
           data={data?.insurance_number}
           name="insurance_number"
@@ -102,6 +105,7 @@ function Form({ data, changeData, updateSelect }) {
         <EditField
           isTransparent={true}
           iconGray={true}
+          type="number"
           changeData={changeData}
           data={data?.home_phone}
           name="home_phone"
@@ -126,6 +130,7 @@ function Form({ data, changeData, updateSelect }) {
       <Content title="تلفن محل کار" isConfirmed={false}>
         <EditField
           isTransparent={true}
+          type="number"
           iconGray={true}
           changeData={changeData}
           data={data?.work_phone}

components/doctors/sortlist/SelectSort.js

@@ -11,20 +11,15 @@ const listSort = [
 
 function SelectSort() {
   const [sort, setSort] = useState("");
-  console.log(sort);
 
-  const handleChange = (event) => {
-    console.log(event);
-
-    setSort(event.target.name);
-  };
+  const handleChange = (event) => setSort(event.target.name);
 
   return (
     <Select
       defaultValue={sort}
       displayEmpty
       onChange={handleChange}
-      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]"
+      className="!w-[198px] !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]">