From 2da4ef9020a749bd422e6233677c6fb24e92e1b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Gomez?= <contact@kevingomez.fr>
Date: Sun, 30 Oct 2022 22:30:16 +0100
Subject: [PATCH] Make CostOverviewBreakdownChart responsive by default
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Kévin Gomez <contact@kevingomez.fr>
---
 .../CostOverviewCard/CostOverviewBreakdownChart.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx
index f6463b65ed..962dc6b332 100644
--- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx
+++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx
@@ -54,12 +54,14 @@ import { TooltipRenderer } from '../../types/Tooltip';
 
 export type CostOverviewBreakdownChartProps = {
   costBreakdown: Cost[];
+  responsive?: boolean;
 };
 
 const LOW_COST_THRESHOLD = 0.1;
 
 export const CostOverviewBreakdownChart = ({
   costBreakdown,
+  responsive = true,
 }: CostOverviewBreakdownChartProps) => {
   const theme = useTheme<CostInsightsTheme>();
   const classes = useStyles(theme);
@@ -228,7 +230,7 @@ export const CostOverviewBreakdownChart = ({
         />
       </Box>
       <ResponsiveContainer
-        width={classes.container.width}
+        width={responsive ? '100%' : classes.container.width}
         height={classes.container.height}
       >
         <AreaChart