fix mui error

src/components/FiDataGrid.js

@@ -55,6 +55,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight = true,
 
     const containerSx = {
         width: '100%',
+        minWidth: 0,
         ...(height ? { height } : {}),
         ...(maxHeight ? { maxHeight, height: '100%' } : {}),
         overflow: 'hidden',

src/pages/Organization/DetailPage/CreditorHistoryTable.js

@@ -1,5 +1,6 @@
 // material-ui
 import * as React from 'react';
+import { Box } from '@mui/material';
 import { FiDataGrid } from "components/FiDataGrid";
 import { useEffect } from "react";
 import * as DateUtils from "utils/DateUtils";
@@ -38,12 +39,17 @@ export default function CreditorHistoryTable({ recordList }) {
     ];
 
     return (
-        <div style={{ height: "fit-content", width: '100%' }}>
+        <Box
+            sx={{
+                width: '100%',
+                minWidth: 0,
+            }}
+        >
             <FiDataGrid
                 rows={rows}
                 columns={columns}
                 customPageSize={100}
             />
-        </div>
+        </Box>
     );
 }

src/pages/Organization/DetailPage/index.js

@@ -180,10 +180,20 @@ const OrganizationDetailPage = () => {
                             <br />
                         </Grid>
                         {isGLDLoggedIn()?
-                            <Grid item xs={12} md={12} lg={12}  display={isEditMode?"none":""}>
-                                <Box xs={12} ml={0} mt={-1} mr={0} sx={{ pl:4, pr:4, pb:2 }}>
-                                    <Grid container sx={{ p: 3, backgroundColor: "#FFF",  borderRadius: '10px' }}>
-                                        <Grid item xs={12} sx={{ p:1 }}>
+                            <Grid
+                                item
+                                xs={12}
+                                md={12}
+                                lg={12}
+                                sx={{
+                                    ...(isEditMode ? { display: 'none' } : {}),
+                                    width: '100%',
+                                    minWidth: 0,
+                                }}
+                            >
+                                <Box ml={0} mt={-1} mr={0} sx={{ pl:4, pr:4, pb:2, width: '100%', minWidth: 0 }}>
+                                    <Grid container sx={{ p: 3, backgroundColor: "#FFF", borderRadius: '10px', width: '100%', minWidth: 0 }}>
+                                        <Grid item xs={12} sx={{ p: 1, width: '100%', minWidth: 0 }}>
                                             <Table
                                                 sx={{ p: 1 }}
                                                 recordList={list}