diff --git a/site/frontend/src/graph/render.ts b/site/frontend/src/graph/render.ts
index 0dc511cdb..1dd1ef6d4 100644
--- a/site/frontend/src/graph/render.ts
+++ b/site/frontend/src/graph/render.ts
@@ -395,7 +395,11 @@ function normalizeData(data: GraphData) {
 }
 
 export type GraphRenderOpts = {
+  // Width of the graph
+  width: number;
+  // Render a title above the graph
   renderTitle?: boolean;
+  // Function that can be used to hook into the rendering process
   hooks?: {drawSeries: (uPlot, number) => void};
 };
 
@@ -405,10 +409,11 @@ export function renderPlots(
   data: GraphData,
   selector: GraphsSelector,
   plotElement: HTMLElement,
-  opts?: GraphRenderOpts
+  opts: GraphRenderOpts
 ) {
-  const renderTitle = opts?.renderTitle ?? true;
-  const hooks = opts?.hooks ?? {};
+  const renderTitle = opts.renderTitle ?? true;
+  const hooks = opts.hooks ?? {};
+  const width = opts.width;
 
   normalizeData(data);
 
@@ -487,7 +492,7 @@ export function renderPlots(
         cacheStates[Object.keys(cacheStates)[0]].interpolated_indices;
 
       let plotOpts = genPlotOpts({
-        width: Math.floor(window.innerWidth / 4) - 40,
+        width,
         height: 300,
         yAxisLabel,
         series: seriesOpts,
diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index b7a5cc3c6..b34af990f 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -112,6 +112,7 @@ async function renderGraph() {
   };
   const graphData = await GRAPH_RESOLVER.loadGraph(selector);
   const opts: GraphRenderOpts = {
+    width: Math.min(window.innerWidth - 40, 480),
     renderTitle: false,
   };
   if (date !== null) {
diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue
index 0a70c5aed..4d564b91f 100644
--- a/site/frontend/src/pages/graphs/page.vue
+++ b/site/frontend/src/pages/graphs/page.vue
@@ -68,9 +68,12 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
   // Then draw the plots.
   await nextTick();
 
+  const width = Math.floor(window.innerWidth / 4) - 40;
+  const opts = {width};
+
   // If we select a smaller subset of benchmarks, then just show them.
   if (hasSpecificSelection(selector)) {
-    renderPlots(graphData, selector, document.getElementById("charts"));
+    renderPlots(graphData, selector, document.getElementById("charts"), opts);
   } else {
     // If we select all of them, we expect that there will be a regular grid.
 
@@ -81,7 +84,7 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
       graphData,
       (benchName) => !benchName.endsWith("-tiny")
     );
-    renderPlots(withoutTiny, selector, document.getElementById("charts"));
+    renderPlots(withoutTiny, selector, document.getElementById("charts"), opts);
 
     // Then, render only the size-related ones in their own dedicated section as they are less
     // important than having the better grouping. So, we only include the benchmarks ending in
@@ -89,7 +92,12 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
     const onlyTiny = filterBenchmarks(graphData, (benchName) =>
       benchName.endsWith("-tiny")
     );
-    renderPlots(onlyTiny, selector, document.getElementById("size-charts"));
+    renderPlots(
+      onlyTiny,
+      selector,
+      document.getElementById("size-charts"),
+      opts
+    );
   }
 }