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

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -1,6 +1,7 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Col, Row, Table, Tag } from "antd";
+import { Button, Card, Col, Row, Tag } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -163,12 +164,24 @@ export function JobAuditTrail({ bodyshop, jobId }) {
             />
           }
         >
-          <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />
+          <ResponsiveTable
+            loading={loading}
+            columns={columns}
+            mobileColumnKeys={["status", "created", "useremail", "operation"]}
+            rowKey="id"
+            dataSource={data ? data.audit_trail : []}
+          />
         </Card>
       </Col>
       <Col span={24}>
         <Card title={t("jobs.labels.emailaudit")}>
-          <Table loading={loading} columns={emailColumns} rowKey="id" dataSource={data ? data.email_audit_trail : []} />
+          <ResponsiveTable
+            loading={loading}
+            columns={emailColumns}
+            mobileColumnKeys={["status", "created", "useremail", "operation"]}
+            rowKey="id"
+            dataSource={data ? data.email_audit_trail : []}
+          />
         </Card>
       </Col>
     </Row>