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

client/src/components/task-list/task-list.component.jsx

@@ -7,7 +7,7 @@ import {
   PlusCircleFilled,
   SyncOutlined
 } from "@ant-design/icons";
-import { Button, Card, Space, Switch, Table } from "antd";
+import { Button, Card, Space, Switch } from "antd";
 import queryString from "query-string";
 import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,7 @@ import dayjs from "../../utils/day";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 import PriorityLabel from "../../utils/tasksPriorityLabel.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils.js";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 /**
  * Task List Component
@@ -345,7 +346,7 @@ function TaskListComponent({
 
   return (
     <Card title={titleTranslation} extra={tasksExtra()}>
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{
           pageSize: pageLimit,
@@ -355,8 +356,8 @@ function TaskListComponent({
           showQuickJumper: true
         }}
         columns={columns}
+        mobileColumnKeys={["title", "due_date", "priority", "toggleCompleted"]}
         rowKey="id"
-        scroll={{ x: true }}
         dataSource={tasks}
         onChange={handleTableChange}
         expandable={{