From 2cb726445066e6a478591d261139deddf64b0760 Mon Sep 17 00:00:00 2001
From: Rodolfo Ruiz <rodolfo.ruiz@heathus.com>
Date: Thu, 4 Sep 2025 20:35:32 -0600
Subject: [PATCH] chore: fix the widh of the grid

---
 src/private/categories/Categories.jsx | 38 +++++++++++++++++----------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/private/categories/Categories.jsx b/src/private/categories/Categories.jsx
index e8aca23..510b782 100644
--- a/src/private/categories/Categories.jsx
+++ b/src/private/categories/Categories.jsx
@@ -143,36 +143,44 @@ export default function Categories() {
         </Box>
       ),
     },
-    // Visible (renamed) fields
-    { field: 'tagName', headerName: 'Name', width: 220 },
-    { field: 'slug', headerName: 'Slug', width: 200 },
-    { field: 'icon', headerName: 'Icon', width: 160 },
+    { field: 'tagName', headerName: 'Name', flex: 1.2, minWidth: 180 },
+    { field: 'slug', headerName: 'Slug', flex: 1.0, minWidth: 160 },
+    { field: 'icon', headerName: 'Icon', flex: 0.7, minWidth: 120 },
     {
       field: 'createdAt',
       headerName: 'Created Date',
-      width: 200,
+      flex: 1.0,
+      minWidth: 180,
       valueFormatter: (p) => {
         const v = p?.value;
         return v ? new Date(v).toLocaleString() : '—';
       },
     },
-    { field: 'createdBy', headerName: 'Created By', width: 180 },
+    { field: 'createdBy', headerName: 'Created By', flex: 0.9, minWidth: 160 },
     {
       field: 'updatedAt',
       headerName: 'Updated Date',
-      width: 200,
+      flex: 1.0,
+      minWidth: 180,
       valueFormatter: (p) => {
         const v = p?.value;
         return v ? new Date(v).toLocaleString() : '—';
       },
     },
-    { field: 'updatedBy', headerName: 'Updated By', width: 180 },
-    { field: 'status', headerName: 'Status', width: 140 },
+    { field: 'updatedBy', headerName: 'Updated By', flex: 0.9, minWidth: 160 },
+    { field: 'status', headerName: 'Status', flex: 0.7, minWidth: 120 },
   ];
 
   return (
-    <Box>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, gap: 2, flexWrap: 'wrap' }}>
+    <Box
+      sx={{
+        height: 'calc(100vh - 64px - 64px)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
         <Typography variant="h6">Categories</Typography>
 
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
@@ -193,21 +201,23 @@ export default function Categories() {
         </Box>
       </Box>
 
-      <Box sx={{ width: '100%', overflowX: 'auto' }}>
+      <Box sx={{ flex: 1, minHeight: 0 }}>
         <DataGrid
           rows={filteredRows}
           columns={columns}
           initialState={{ pagination: { paginationModel: { pageSize: 10 } } }}
           pageSizeOptions={[10]}
-          autoHeight
           disableColumnMenu
           getRowId={(r) => r?._id || r?.id}
           sx={{
-            minWidth: 1400,
+            height: '100%',
             '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': {
               display: 'flex',
               alignItems: 'center',
             },
+            '& .MuiDataGrid-filler': {
+              display: 'none',
+            },
           }}
           slots={{
             noRowsOverlay: () => (