diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx
index 1a4bb4ba6e..3e77858967 100644
--- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx
+++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx
@@ -106,7 +106,7 @@ export const CostOverviewCard = ({
   const showMetricSelect = config.metrics.length && safeTabIndex === 0;
 
   return (
-    <Card style={{ position: 'relative' }}>
+    <Card style={{ position: 'relative', overflow: 'visible' }}>
       <ScrollAnchor id={DefaultNavigation.CostOverviewCard} />
       <CardContent>
         {dailyCostData.groupedCosts && <OverviewTabs />}
diff --git a/plugins/cost-insights/src/example/client.ts b/plugins/cost-insights/src/example/client.ts
index a7a2a0e22f..f1abfffe38 100644
--- a/plugins/cost-insights/src/example/client.ts
+++ b/plugins/cost-insights/src/example/client.ts
@@ -63,6 +63,9 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
       { id: 'project-a' },
       { id: 'project-b' },
       { id: 'project-c' },
+      { id: 'project-a1' },
+      { id: 'project-b1' },
+      { id: 'project-c1' },
     ]);
 
     return projects;
diff --git a/plugins/cost-insights/src/testUtils/testUtils.ts b/plugins/cost-insights/src/testUtils/testUtils.ts
index e0ed1aa933..b818d31a59 100644
--- a/plugins/cost-insights/src/testUtils/testUtils.ts
+++ b/plugins/cost-insights/src/testUtils/testUtils.ts
@@ -188,4 +188,136 @@ export const getGroupedProjects = (intervals: string) => [
     id: 'project-c',
     aggregation: aggregationFor(intervals, 1_300),
   },
+  {
+    id: 'project-a1',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b1',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c1',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a2',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b2',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c2',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a3',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b3',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c3',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a4',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b4',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c4',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a5',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b5',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c5',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a6',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b6',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c6',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a7',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b7',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c7',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a8',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b8',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c8',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a10',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b10',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c10',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a11',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b11',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c11',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
+  {
+    id: 'project-a12',
+    aggregation: aggregationFor(intervals, 1_700),
+  },
+  {
+    id: 'project-b12',
+    aggregation: aggregationFor(intervals, 350),
+  },
+  {
+    id: 'project-c12',
+    aggregation: aggregationFor(intervals, 1_300),
+  },
 ];