feat: adapt group form field for mobile

Author: maxceem

src/components/FormField/index.jsx

@@ -13,12 +13,12 @@ import ReactSelect from "../../components/ReactSelect";
 import DateInput from "../../components/DateInput";
 import "./styles.module.scss";
 
-const FormField = ({ field, isGroupField }) => {
+const FormField = ({ field }) => {
   return (
     <Field name={field.name}>
       {({ input, meta }) => (
-        <div styleName={isGroupField ? "field-group-field" : ""}>
-          { !field.readonly && (             
+        <div>
+          { !field.readonly && (
             <label
               styleName={
                 (input.value != "undefined" && input.value !== null && input.value !== "") || meta.active

src/components/FormField/styles.module.scss

@@ -37,10 +37,6 @@ input:read-only {
   margin-top: 24px;
 }
 
-.field-group-field {
-  width: 45%;
-}
-
 .field-error {
   @include font-roboto;
   width: 100%;

src/components/TCForm/index.jsx

@@ -56,14 +56,13 @@ const TCForm = ({
                     <>
                       {row.type === FORM_ROW_TYPE.GROUP && (
                         <div styleName="field-group">
-                          {row.fields.map((field) => {
-                            return (
+                          {row.fields.map((field) => (
+                            <div styleName="field-group-field" key={field.name}>
                               <FormField
                                 field={fields[field]}
-                                isGroupField={true}
                               />
-                            );
-                          })}
+                            </div>
+                          ))}
                         </div>
                       )}
                       {row.type === FORM_ROW_TYPE.SINGLE &&

src/components/TCForm/styles.module.scss

@@ -1,52 +1,66 @@
 @import "styles/include";
 @import "~react-datepicker/dist/react-datepicker.css";
 
+.tc-form {
+  width: 100%;
+}
 
+.job-form-fields-container {
+  padding: 40px 0px 20px;
 
-.tc-form {
+  input:not([type="checkbox"]),
+  textarea {
+    margin-bottom: 0px;
+  }
+}
+
+.job-form-fields-wrapper{
   width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.field-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 
-  .job-form-fields-container {
-    padding: 40px 0px 20px;
-
-    .job-form-fields-wrapper{
-      width: 100%;
-      max-width: 640px;
-      margin: 0 auto;
-      text-align: left;
-    }
-
-    input:not([type="checkbox"]),
-    textarea {
-      margin-bottom: 0px;
-    }
-
-    .field-group {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    }
+.field-group-field {
+  padding: 0 10px;
+  width: 50%;
+}
+
+.field-group-field:first-child {
+  padding-left: 0;
+}
+
+.field-group-field:last-child {
+  padding-right: 0;
+}
+
+.form-actions {
+  border-top: 1px solid #e9e9e9;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 16px 0 16px;
+
+  :first-child {
+    margin-left: auto;
   }
 
-  .form-actions {
-    border-top: 1px solid #e9e9e9;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    padding: 16px 0 16px;
-    :first-child {
-      margin-left: auto;
-    }
-    button {
-      height: 40px;
-      border-radius: 20px;
-      line-height: 40px;
-    }
-    a {
-      margin-left: 15px;
-    }
+  button {
+    height: 40px;
+    border-radius: 20px;
+    line-height: 40px;
+  }
+
+  a {
+    margin-left: 15px;
   }
 }
 
@@ -58,4 +72,11 @@
 
 .datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
   z-index: 100;
+}
+
+@media (max-width: 650px) {
+  .field-group-field {
+    padding: 0;
+    width: 100%;
+  }
 }