feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

client/src/components/parts-queue-list/parts-queue.list.component.jsx

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Checkbox, Input, Space, Table } from "antd";
+import { Button, Card, Checkbox, Input, Space } from "antd";
 import _ from "lodash";
 import queryString from "query-string";
 import { useState } from "react";
@@ -19,6 +19,7 @@ import AlertComponent from "../alert/alert.component";
 import JobRemoveFromPartsQueue from "../job-remove-from-parst-queue/job-remove-from-parts-queue.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import JobPartsReceived from "../job-parts-received/job-parts-received.component";
 
@@ -310,7 +311,7 @@ export function PartsQueueListComponent({ bodyshop }) {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{
           placement: "top",
@@ -319,6 +320,7 @@ export function PartsQueueListComponent({ bodyshop }) {
           // total: data && data.jobs_aggregate.aggregate.count,
         }}
         columns={columns}
+        mobileColumnKeys={["ro_number", "ownr_ln", "status", "vehicle", "partsstatus"]}
         rowKey="id"
         dataSource={jobs}
         style={{ height: "100%" }}