Further UI Updates

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -3,25 +3,8 @@ import React from "react";
 import AlertComponent from "../alert/alert.component";
 import BillsListTable from "../bills-list-table/bills-list-table.component";
 import JobBillsTotal from "../job-bills-total/job-bills-total.component";
-import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
 import PartsOrderListTableComponent from "../parts-order-list-table/parts-order-list-table.component";
-const tableCol = {
-  xs: {
-    span: 24,
-  },
-  md: {
-    span: 20,
-  },
-};
-
-const totalsCol = {
-  xs: {
-    span: 24,
-  },
-  md: {
-    span: 4,
-  },
-};
+import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
 
 export default function JobsDetailPliComponent({
   job,
@@ -35,26 +18,29 @@ export default function JobsDetailPliComponent({
       {billsQuery.error ? (
         <AlertComponent message={billsQuery.error.message} type="error" />
       ) : null}
-      <Row>
-        <Col {...tableCol}>
-          <PartsOrderListTableComponent
-            job={job}
-            handleOnRowClick={handlePartsOrderOnRowClick}
-            billsQuery={billsQuery}
-          />
-          <BillsListTable
-            job={job}
-            handleOnRowClick={handleBillOnRowClick}
-            billsQuery={billsQuery}
-          />
-        </Col>
-        <Col {...totalsCol}>
+
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
           <JobBillsTotal
             bills={billsQuery.data ? billsQuery.data.bills : []}
             loading={billsQuery.loading}
             jobTotals={job.job_totals}
           />
         </Col>
+        <Col span={24}>
+          <PartsOrderListTableComponent
+            job={job}
+            handleOnRowClick={handlePartsOrderOnRowClick}
+            billsQuery={billsQuery}
+          />
+        </Col>
+        <Col span={24}>
+          <BillsListTable
+            job={job}
+            handleOnRowClick={handleBillOnRowClick}
+            billsQuery={billsQuery}
+          />
+        </Col>
       </Row>
     </div>
   );