feat: full screen form for mobile

components/PhoneInput/PhoneInput.module.css

@@ -14,7 +14,3 @@
     }
     border-radius: 15px;
 }
-
-.country-dropdown {
-    border-radius: 15px;
-}

components/PhoneInput/PhoneInput.tsx

@@ -41,6 +41,7 @@ const PhoneInput = ({
         initialData.current.localValue
     );
     const inputRef = useRef<HTMLInputElement>(null);
+    const [dropdownWidth, setDropdownWidth] = useState<number>(300);
 
     const lastNotifiedValue = useRef<string | null>(value ?? "");
 
@@ -71,6 +72,11 @@ const PhoneInput = ({
     const { readOnly, disabled } = props;
     const leftSectionWidth = 90;
 
+    useEffect(() => {
+        if (!inputRef.current?.offsetWidth) return;
+        setDropdownWidth(inputRef.current?.offsetWidth);
+    }, [inputRef.current?.offsetWidth]);
+
     return (
         <InputBase
             {...props}
@@ -89,6 +95,7 @@ const PhoneInput = ({
                         }
                     }}
                     leftSectionWidth={leftSectionWidth}
+                    inputWidth={dropdownWidth}
                 />
             }
             leftSectionWidth={leftSectionWidth}

components/PhoneInput/components/CountrySelect.tsx

@@ -21,6 +21,7 @@ type Props = {
     setCountry: (country: Country) => void;
     disabled: boolean | undefined;
     leftSectionWidth: number;
+    inputWidth?: number;
 };
 
 const CountrySelect = ({
@@ -28,6 +29,7 @@ const CountrySelect = ({
     setCountry,
     disabled,
     leftSectionWidth,
+    inputWidth,
 }: Props) => {
     const [search, setSearch] = useState("");
 
@@ -84,10 +86,12 @@ const CountrySelect = ({
     return (
         <Combobox
             store={combobox}
-            width={350}
             position={"bottom-start"}
-            classNames={{
-                dropdown: style["country-dropdown"],
+            styles={{
+                dropdown: {
+                    borderRadius: "15px",
+                    minWidth: `${inputWidth}px`,
+                },
             }}
             onOptionSubmit={val => {
                 setCountry(countryOptionsDataMap[val]);