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

client/src/components/vehicles-list/vehicles-list.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 queryString from "query-string";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 import { pageLimit } from "../../utils/config";
 import { alphaSort } from "../../utils/sorters";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 export default function VehiclesListComponent({ loading, vehicles, total, refetch, basePath = "/manage" }) {
   const search = queryString.parse(useLocation().search);
@@ -103,10 +104,11 @@ export default function VehiclesListComponent({ loading, vehicles, total, refetc
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: total }}
         columns={columns}
+        mobileColumnKeys={["v_vin", "description", "plate_no"]}
         rowKey="id"
         scroll={{ x: true }}
         dataSource={vehicles}