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">
brave · Apr 25, 2024 · ba18aa4 · ba18aa4
1 parent c47e897
commit ba18aa4
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git 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
@@ -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} />