From ba18aa4c94b2adba2e7e95cc2285ab6b2fed2ef3 Mon Sep 17 00:00:00 2001
From: Graham Tackley <gtackley@brave.com>
Date: Thu, 25 Apr 2024 09:54:22 +0100
Subject: [PATCH] fix: minor layout fixes after data grid update (#1174)

The new version of data grid stopped cells automatically being display:
"flex" for layout performance reasons. Enforce this for those cells that
need it.

Before:

<img width="1211" alt="Screenshot 2024-04-24 at 15 01 19"
src="https://github.com/brave/ads-ui/assets/51444/e19b47ba-dac1-4982-b788-7cda178c5b34">

After:

<img width="1211" alt="Screenshot 2024-04-24 at 15 02 50"
src="https://github.com/brave/ads-ui/assets/51444/65e1f872-287b-42bb-8a61-ec9054da5610">

Before:

<img width="1061" alt="Screenshot 2024-04-24 at 15 40 07"
src="https://github.com/brave/ads-ui/assets/51444/86665b29-e165-4e94-b307-dfb71bb39de1">

After:

<img width="1061" alt="Screenshot 2024-04-24 at 15 38 29"
src="https://github.com/brave/ads-ui/assets/51444/b78ce51f-bf63-4ab2-a667-6fc8950cbae3">
---
 src/components/Creatives/CreativeList.tsx    | 1 +
 src/user/analytics/search/AdSetBreakdown.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/Creatives/CreativeList.tsx b/src/components/Creatives/CreativeList.tsx
index 371fb5e0..f4b09f36 100644
--- a/src/components/Creatives/CreativeList.tsx
+++ b/src/components/Creatives/CreativeList.tsx
@@ -73,6 +73,7 @@ export function CreativeList() {
       valueGetter: (_value, row) => creativeValuesGetter(row),
       renderCell: ({ row }) => <CreativePayloadList creative={row} />,
       flex: 1,
+      display: "flex",
       sortable: false,
     },
     {
diff --git a/src/user/analytics/search/AdSetBreakdown.tsx b/src/user/analytics/search/AdSetBreakdown.tsx
index 41e71977..11caff9a 100644
--- a/src/user/analytics/search/AdSetBreakdown.tsx
+++ b/src/user/analytics/search/AdSetBreakdown.tsx
@@ -23,6 +23,7 @@ function getColumnDefinitionForMetric(metric: MetricDefinition): GridColDef {
     type: "number",
     align: "right",
     headerAlign: "right",
+    display: "flex",
     width: 100,
     renderCell: ({ value }) => (
       <RenderMetric type={metric.type} value={value} />