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;
+  }
 }