fix: fix column size and padding in configs tables

Fixes #2363

Author: mainawycliffe

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",

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,

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} />;