IO-2054 Improved spacing for QB Multi Payer

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -3,6 +3,7 @@ import { useApolloClient, useMutation } from "@apollo/client";
 import {
   Alert,
   Button,
+  Col,
   Divider,
   Form,
   Input,
@@ -10,6 +11,7 @@ import {
   notification,
   PageHeader,
   Popconfirm,
+  Row,
   Select,
   Space,
   Statistic,
@@ -329,7 +331,8 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
         </LayoutFormRow>
         <Divider>{t("jobs.labels.multipayers")}</Divider>
         {Qb_Multi_Ar.treatment === "on" && (
-          <Space>
+          <Row gutter={[16, 16]}>
+            <Col lg={8} md={24}>
               <Form.List
                 name={["qb_multiple_payers"]}
                 rules={[
@@ -427,6 +430,8 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
                   );
                 }}
               </Form.List>
+            </Col>
+            <Col lg={16} md={24}>
               <Form.Item shouldUpdate>
                 {() => {
                   //Perform Calculation to determine discrepancy.
@@ -436,7 +441,9 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
                   payers &&
                     payers.forEach((payer) => {
                       totalAllocated = totalAllocated.add(
-                      Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
+                        Dinero({
+                          amount: Math.round((payer?.amount || 0) * 100),
+                        })
                       );
                     });
                   const discrep = job.job_totals
@@ -453,7 +460,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
                           : Dinero()
                         ).toFormat()}
                       />
-                    <Divider orientation="vertical" />
+                      <Divider type="vertical" />
                       <Statistic
                         title={t("jobs.labels.total_repairs")}
                         value={(job.job_totals
@@ -478,7 +485,8 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
                   );
                 }}
               </Form.Item>
-          </Space>
+            </Col>
+          </Row>
         )}
         <Divider />
         <JobsCloseLines job={job} />