fix: adjust width settings

brave · Oct 12, 2023 · 1ed169c · 1ed169c
1 parent c3f82da
commit 1ed169c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/src/user/campaignList/CampaignList.tsx b/src/user/campaignList/CampaignList.tsx
@@ -80,15 +80,17 @@ export function CampaignList({
       renderCell: ({ row }) => (
         <Status state={row.state} start={row.startAt} end={row.endAt} />
       ),
-      width: 150,
+      minWidth: 120,
+      maxWidth: 150,
     },
     {
       field: "budget",
       headerName: "Budget",
       renderCell: ({ row }) => renderMonetaryAmount(row.budget, row.currency),
       align: "right",
       headerAlign: "right",
-      width: 150,
+      minWidth: 100,
+      maxWidth: 150,
     },
     {
       field: "spend",
@@ -98,7 +100,8 @@ export function CampaignList({
         renderEngagementCell(loading, row, "spend", engagementData),
       align: "right",
       headerAlign: "right",
-      width: 150,
+      minWidth: 100,
+      maxWidth: 150,
     },
     {
       field: "view",
@@ -108,7 +111,8 @@ export function CampaignList({
         renderEngagementCell(loading, row, "view", engagementData),
       align: "right",
       headerAlign: "right",
-      width: 250,
+      minWidth: 100,
+      maxWidth: 250,
     },
     {
       field: "click",
@@ -118,7 +122,8 @@ export function CampaignList({
         renderEngagementCell(loading, row, "click", engagementData),
       align: "right",
       headerAlign: "right",
-      width: 250,
+      minWidth: 100,
+      maxWidth: 250,
     },
     {
       field: "landed",
@@ -129,7 +134,8 @@ export function CampaignList({
         renderEngagementCell(loading, row, "landed", engagementData),
       align: "right",
       headerAlign: "right",
-      width: 250,
+      minWidth: 100,
+      maxWidth: 250,
     },
     {
       field: "startAt",

diff --git a/src/user/views/user/AdDetailTable.tsx b/src/user/views/user/AdDetailTable.tsx
@@ -36,7 +36,8 @@ export function AdDetailTable<T extends { id: string }>({
           ),
         align: "right",
         headerAlign: "right",
-        width: 250,
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
         field: "view",
@@ -46,7 +47,8 @@ export function AdDetailTable<T extends { id: string }>({
           renderStatsCell(loading, "views", engagements.get(row.id)),
         align: "right",
         headerAlign: "right",
-        width: 250,
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
         field: "click",
@@ -56,7 +58,8 @@ export function AdDetailTable<T extends { id: string }>({
           renderStatsCell(loading, "clicks", engagements.get(row.id)),
         align: "right",
         headerAlign: "right",
-        width: 250,
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
         field: "landed",
@@ -66,7 +69,8 @@ export function AdDetailTable<T extends { id: string }>({
           renderStatsCell(loading, "landings", engagements.get(row.id)),
         align: "right",
         headerAlign: "right",
-        width: 250,
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
         field: "ctr",
@@ -76,7 +80,8 @@ export function AdDetailTable<T extends { id: string }>({
           renderStatsCell(loading, "ctr", engagements.get(row.id)),
         align: "right",
         headerAlign: "right",
-        width: 250,
+        minWidth: 100,
+        maxWidth: 250,
       },
     );
   }