diff --git a/pkg/app/web/src/components/deployment-frequency-chart.tsx b/pkg/app/web/src/components/deployment-frequency-chart.tsx
index 3727ed7284..4f93d13dd2 100644
--- a/pkg/app/web/src/components/deployment-frequency-chart.tsx
+++ b/pkg/app/web/src/components/deployment-frequency-chart.tsx
@@ -8,6 +8,7 @@ import {
   XAxis,
   CartesianGrid,
   Tooltip,
+  ResponsiveContainer,
 } from "recharts";
 import dayjs from "dayjs";
 import { theme } from "../theme";
@@ -15,10 +16,7 @@ import { theme } from "../theme";
 const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(3),
-    width: 680,
-  },
-  chart: {
-    flex: 1,
+    minWidth: 600,
   },
 }));
 
@@ -26,9 +24,6 @@ interface Props {
   data: InsightDataPoint.AsObject[];
 }
 
-const CHART_WIDTH = 600;
-const CHART_HEIGHT = 400;
-
 export const DeploymentFrequencyChart: FC<Props> = ({ data }) => {
   const classes = useStyles();
 
@@ -44,38 +39,37 @@ export const DeploymentFrequencyChart: FC<Props> = ({ data }) => {
       </Typography>
       {data.length === 0 ? (
         <Box
-          width={CHART_WIDTH}
-          height={CHART_HEIGHT}
           display="flex"
           alignItems="center"
           justifyContent="center"
+          height={420}
         >
           <Typography variant="body1">No data</Typography>
         </Box>
       ) : (
-        <LineChart
-          data={data}
-          width={CHART_WIDTH}
-          height={CHART_HEIGHT}
-          margin={{
-            top: 48,
-            right: 24,
-            left: 8,
-            bottom: 8,
-          }}
-        >
-          <CartesianGrid vertical={false} />
-          <Line
-            dataKey="value"
-            stroke={theme.palette.primary.main}
-            strokeWidth={2}
-            isAnimationActive={false}
-            dot={{ fill: theme.palette.primary.main }}
-          />
-          <YAxis />
-          <XAxis dataKey="timestamp" tickFormatter={formatter} />
-          <Tooltip labelFormatter={formatter} />
-        </LineChart>
+        <ResponsiveContainer width="100%" aspect={2}>
+          <LineChart
+            data={data}
+            margin={{
+              top: 48,
+              right: 24,
+              left: 8,
+              bottom: 8,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <Line
+              dataKey="value"
+              stroke={theme.palette.primary.main}
+              strokeWidth={2}
+              isAnimationActive={false}
+              dot={{ fill: theme.palette.primary.main }}
+            />
+            <YAxis />
+            <XAxis dataKey="timestamp" tickFormatter={formatter} />
+            <Tooltip labelFormatter={formatter} />
+          </LineChart>
+        </ResponsiveContainer>
       )}
     </Paper>
   );