From 0e0ad7dbaf67c2e662ff16b85f5ddde7ae37b68e Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 23 Oct 2024 21:52:45 +0300
Subject: [PATCH] fix: fix column size and padding in configs tables

Fixes #2363
---
 .../ConfigList/MRTConfigListColumn.tsx        | 23 ++++++++-----------
 src/components/Configs/ConfigsTypeIcon.tsx    |  2 +-
 src/ui/MRTDataTable/MRTDataTable.tsx          |  7 +++---
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/components/Configs/ConfigList/MRTConfigListColumn.tsx b/src/components/Configs/ConfigList/MRTConfigListColumn.tsx
index 757634991..55ad76726 100644
--- a/src/components/Configs/ConfigList/MRTConfigListColumn.tsx
+++ b/src/components/Configs/ConfigList/MRTConfigListColumn.tsx
@@ -38,8 +38,8 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
         </div>
       );
     },
-    minSize: 200,
-    size: 270,
+    minSize: 300,
+    size: 400,
     enableGrouping: true,
     enableSorting: true,
     enableHiding: false,
@@ -78,7 +78,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
   {
     header: "Type",
     accessorKey: "type",
-    size: 170,
+    size: 250,
     enableSorting: true,
     enableHiding: true,
     enableColumnActions: false,
@@ -89,8 +89,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
   {
     header: "Status",
     accessorKey: "health",
-    minSize: 100,
-    maxSize: 180,
+    minSize: 200,
     enableSorting: true,
     enableColumnActions: false,
     Cell: ({ cell, row }) => {
@@ -133,7 +132,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
 
       return <ChangeCountIcon count={value} />;
     },
-    size: 70,
+    size: 200,
     meta: {
       cellClassName: "overflow-hidden"
     },
@@ -150,7 +149,6 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
         filterByTagParamKey="labels"
       />
     ),
-    maxSize: 300,
     minSize: 100
   },
   {
@@ -212,9 +210,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
           />
         </div>
       );
-    },
-    minSize: 50,
-    maxSize: 100
+    }
   },
   {
     header: "Cost",
@@ -231,22 +227,21 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
     },
     Cell: ({ row }) => {
       return <ConfigCostValue config={row.original} popover={false} />;
-    },
-    maxSize: 60
+    }
   },
   {
     header: "Created",
     accessorKey: "created_at",
     enableColumnActions: false,
     Cell: MRTConfigListDateCell,
-    maxSize: 70
+    maxSize: 100
   },
   {
     header: "Updated",
     accessorKey: "updated_at",
     enableColumnActions: false,
     Cell: MRTConfigListDateCell,
-    maxSize: 70
+    maxSize: 100
   },
   {
     header: "Deleted At",
diff --git a/src/components/Configs/ConfigsTypeIcon.tsx b/src/components/Configs/ConfigsTypeIcon.tsx
index ea915f588..f18785797 100644
--- a/src/components/Configs/ConfigsTypeIcon.tsx
+++ b/src/components/Configs/ConfigsTypeIcon.tsx
@@ -13,7 +13,7 @@ export type ConfigIconProps = {
 
 export default function ConfigsTypeIcon({
   config,
-  className = "w-4 h-4",
+  className = "w-4",
   showPrimaryIcon = true,
   showSecondaryIcon = true,
   showLabel = false,
diff --git a/src/ui/MRTDataTable/MRTDataTable.tsx b/src/ui/MRTDataTable/MRTDataTable.tsx
index 221afae78..05d751f57 100644
--- a/src/ui/MRTDataTable/MRTDataTable.tsx
+++ b/src/ui/MRTDataTable/MRTDataTable.tsx
@@ -135,12 +135,13 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
       rowsPerPageOptions: ["50", "100", "200"]
     },
     mantineExpandButtonProps: {
-      size: "xs"
+      size: 20
     },
     mantineExpandAllButtonProps: {
-      size: "xs"
+      size: 20
     },
-    renderDetailPanel
+    renderDetailPanel,
+    displayColumnDefOptions: { "mrt-row-expand": { size: 5 } } //change width of actions column to 300px
   });
 
   return <MantineReactTable table={table} />;