From 31c7abab39961a602a82f5229570cfab0a0fe6b9 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Fri, 27 Feb 2026 13:08:34 -0500
Subject: [PATCH] feature/feature/IO-3554-Form-Row-Layout - Fix Monthly Job
 Costing (Dashboard)

---
 .../monthly-job-costing.component.jsx         | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx b/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
index 7088bc684..5d3a19fc1 100644
--- a/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
+++ b/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
@@ -1,4 +1,4 @@
-import { Card, Input, Space, Table, Typography } from "antd";
+import { Card, Input, Space, Typography } from "antd";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
 import Dinero from "dinero.js";
 import DashboardRefreshRequired from "../refresh-required.component";
 import { pageLimit } from "../../../utils/config";
+import ResponsiveTable from "../../responsive-table/responsive-table.component.jsx";
 
 export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -103,31 +104,33 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
       {...cardProps}
     >
       <LoadingSkeleton loading={loading}>
-        <div style={{ height: "100%" }}>
-          <Table
+        <div style={{ height: "100%", minHeight: 0, width: "100%", overflow: "auto" }}>
+          <ResponsiveTable
+            size="small"
+            tableLayout="fixed"
             onChange={handleTableChange}
             pagination={{ placement: "top", defaultPageSize: pageLimit }}
             columns={columns}
-            scroll={{ x: true, y: "calc(100% - 4em)" }}
+            scroll={{ x: "max-content" }}
             rowKey="id"
-            style={{ height: "100%" }}
+            style={{ width: "100%" }}
             dataSource={filteredData}
             summary={() => (
-              <Table.Summary.Row>
-                <Table.Summary.Cell>
+              <ResponsiveTable.Summary.Row>
+                <ResponsiveTable.Summary.Cell>
                   <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
-                </Table.Summary.Cell>
-                <Table.Summary.Cell>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell>
                   {Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalSales).toFormat()}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell>
                   {Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalCost).toFormat()}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell>
                   {Dinero(costingData?.allSummaryData && costingData.allSummaryData.gpdollars).toFormat()}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell></Table.Summary.Cell>
-              </Table.Summary.Row>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell></ResponsiveTable.Summary.Cell>
+              </ResponsiveTable.Summary.Row>
             )}
           />
         </div>