fix: mobile form ui and parse phone number bug

components/Forms/Edit/Profile/form.module.css

@@ -1,10 +1,48 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x3);
+  grid-template-areas:
+    "title"
+    "form"
+    "buttons";
+}
+
+.title {
+  grid-area: title;
+}
+
 .form {
   display: grid;
   gap: var(--Spacing-x5);
-  grid-template-columns: 1fr 1fr;
+  grid-area: form;
 }
 
-.btns {
+.btnContainer {
   display: flex;
-  gap: var(--Spacing-x2);
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x1);
+  grid-area: buttons;
+}
+
+.btn {
+  justify-content: center;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    grid-template-areas:
+      "title buttons"
+      "form form";
+  }
+
+  .form {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .btnContainer {
+    flex-direction: row;
+    gap: var(--Spacing-x2);
+    justify-self: flex-end;
+    align-self: center;
+  }
 }

components/Forms/Edit/Profile/index.tsx

@@ -61,41 +61,47 @@ export default function Form({ user }: EditFormProps) {
   })
 
   return (
-    <>
-      <Header>
-        <hgroup>
-          <Title as="h4" color="red" level="h1" textTransform="capitalize">
-            {formatMessage({ id: "Welcome" })}
-          </Title>
-          <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
-            {user.name}
-          </Title>
-        </hgroup>
-        <div className={styles.btns}>
-          <Button asChild intent="secondary" size="small" theme="base">
-            <Link href={profile[lang]}>
-              {formatMessage({ id: "Discard changes" })}
-            </Link>
-          </Button>
-          <Button
-            disabled={
-              !methods.formState.isValid || methods.formState.isSubmitting
-            }
-            form={formId}
-            intent="primary"
-            size="small"
-            theme="base"
-            type="submit"
-          >
-            {formatMessage({ id: "Save" })}
-          </Button>
-        </div>
-      </Header>
+    <section className={styles.container}>
+      <hgroup className={styles.title}>
+        <Title as="h4" color="red" level="h1" textTransform="capitalize">
+          {formatMessage({ id: "Welcome" })}
+        </Title>
+        <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
+          {user.name}
+        </Title>
+      </hgroup>
+      <div className={styles.btnContainer}>
+        <Button
+          asChild
+          intent="secondary"
+          size="small"
+          theme="base"
+          className={styles.btn}
+        >
+          <Link href={profile[lang]}>
+            {formatMessage({ id: "Discard changes" })}
+          </Link>
+        </Button>
+        <Button
+          disabled={
+            !methods.formState.isValid || methods.formState.isSubmitting
+          }
+          className={styles.btn}
+          form={formId}
+          intent="primary"
+          size="small"
+          theme="base"
+          type="submit"
+        >
+          {formatMessage({ id: "Save" })}
+        </Button>
+      </div>
+
       <form action={formAction} className={styles.form} id={formId}>
         <FormProvider {...methods}>
           <FormContent />
         </FormProvider>
       </form>
-    </>
+    </section>
   )
 }