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

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Input, Space, Typography } from "antd";
 import axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
@@ -15,6 +15,7 @@ import { alphaSort, statusSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
@@ -238,7 +239,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading || searchLoading}
         pagination={
           search?.search
@@ -254,6 +255,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
               }
         }
         columns={columns}
+        mobileColumnKeys={["ro_number", "ownr_ln", "status", "vehicle"]}
         rowKey="id"
         dataSource={search?.search ? openSearchResults : jobs}
         onChange={handleTableChange}