IO-1272 Improve reconciliation table UI

client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx

@@ -21,7 +21,8 @@ export default function JobReconciliationBillsTable({
       title: t("billlines.fields.line_desc"),
       dataIndex: "line_desc",
       key: "line_desc",
-      width: "35%",
+      ellipsis: true,
+      minWidth: "65rem",
       sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
       sortOrder:
         state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
@@ -30,7 +31,7 @@ export default function JobReconciliationBillsTable({
       title: t("billlines.labels.from"),
       dataIndex: "from",
       key: "from",
-      width: "20%",
+
       ellipsis: true,
       render: (text, record) =>
         `${record.bill.vendor && record.bill.vendor.name} / ${
@@ -42,6 +43,7 @@ export default function JobReconciliationBillsTable({
       dataIndex: "actual_price",
       key: "actual_price",
       sorter: (a, b) => a.actual_price - b.actual_price,
+      width: "7rem",
       sortOrder:
         state.sortedInfo.columnKey === "actual_price" && state.sortedInfo.order,
       render: (text, record) => (
@@ -53,6 +55,7 @@ export default function JobReconciliationBillsTable({
       dataIndex: "actual_cost",
       key: "actual_cost",
       sorter: (a, b) => a.actual_cost - b.actual_cost,
+      width: "7rem",
       sortOrder:
         state.sortedInfo.columnKey === "actual_cost" && state.sortedInfo.order,
       render: (text, record) => (
@@ -64,6 +67,7 @@ export default function JobReconciliationBillsTable({
       dataIndex: "quantity",
       key: "quantity",
       sorter: (a, b) => a.quantity - b.quantity,
+      width: "4rem",
       sortOrder:
         state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
     },
@@ -72,9 +76,11 @@ export default function JobReconciliationBillsTable({
       dataIndex: "is_credit_memo",
       key: "is_credit_memo",
       sorter: (a, b) => a.bill.is_credit_memo - b.bill.is_credit_memo,
+      width: "8rem",
       sortOrder:
         state.sortedInfo.columnKey === "is_credit_memo" &&
         state.sortedInfo.order,
+
       render: (text, record) => (
         <Checkbox disabled checked={record.bill.is_credit_memo} />
       ),
@@ -94,7 +100,7 @@ export default function JobReconciliationBillsTable({
       <Table
         pagination={false}
         size="small"
-        scroll={{ y: "80vh", x: true }}
+        scroll={{ y: "60vh" }}
         columns={columns}
         rowKey="id"
         dataSource={invoiceLineData}