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

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -1,6 +1,6 @@
 import { DeleteFilled, DownloadOutlined, PlusCircleFilled, SyncOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client/react";
-import { Alert, Button, Card, Input, Space, Table } from "antd";
+import { Alert, Button, Card, Input, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -13,6 +13,7 @@ import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils.js";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -209,7 +210,14 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
         </Space>
       }
     >
-      <Table loading={loading} columns={columns} rowKey="id" dataSource={availableJobs} onChange={handleTableChange} />
+      <ResponsiveTable
+        loading={loading}
+        columns={columns}
+        mobileColumnKeys={["cieca_id", "job_id", "ownr_name", "vehicle_info", "actions"]}
+        rowKey="id"
+        dataSource={availableJobs}
+        onChange={handleTableChange}
+      />
     </Card>
   );
 }