update modals & text & design

app/component/modalSearchCity/Content.js

@@ -15,6 +15,12 @@ function Content({
   isProvinceInclude,
 }) {
   const citySelected = selected.city;
+  const listboxProps = {
+    style: {
+      maxHeight: 200,
+      overflow: "auto",
+    },
+  };
 
   return (
     <div>
@@ -29,15 +35,17 @@ function Content({
         </p>
         <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
           <AutoCompleteSelect
-            updateData={updateData}
             value={selected && provinceSelected}
             disabled={isProvinceInclude}
+            listboxProps={listboxProps}
+            updateData={updateData}
             list={states}
             label="استان"
             name="province"
           />
           <AutoCompleteSelect
             updateData={updateData}
+            listboxProps={listboxProps}
             value={
               selected &&
               citySelected &&
@@ -50,8 +58,8 @@ function Content({
             disabled={
               isProvinceInclude
                 ? !isProvinceInclude ||
-                  !provinceSelected ||
-                  filteredCities.length === 0
+                !provinceSelected ||
+                filteredCities.length === 0
                 : !provinceSelected || filteredCities.length === 0
             }
           />