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

client/src/components/notification-settings/notification-settings-form.component.jsx

@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from "@apollo/client/react";
 import { useEffect, useState } from "react";
-import { Alert, Button, Card, Checkbox, Divider, Form, Space, Switch, Table, Typography } from "antd";
+import { Alert, Button, Card, Checkbox, Divider, Form, Space, Switch, Typography } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -204,7 +205,14 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
             <Alert title={t("notifications.labels.employee-notification")} type="warning" />
           </div>
         )}
-        <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />
+        <ResponsiveTable
+          dataSource={dataSource}
+          columns={columns}
+          mobileColumnKeys={["email", "scenario", "app", "fcm"]}
+          pagination={false}
+          bordered
+          rowKey="key"
+        />
         <Divider />
       </Card>
     </Form>