From bec3a7d9836ffeddbdfde889755393d91b9867e9 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Thu, 29 Aug 2024 23:07:20 +0800
Subject: [PATCH] docs: fix Benchmark graph width

---
 website/docs/en/guide/start/index.mdx          |  2 +-
 website/docs/zh/guide/start/index.mdx          |  2 +-
 website/theme/components/Benchmark.module.scss |  7 +++++++
 website/theme/components/Benchmark.tsx         | 10 ++++++++--
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/website/docs/en/guide/start/index.mdx b/website/docs/en/guide/start/index.mdx
index 89945761d6..963a5de8f1 100644
--- a/website/docs/en/guide/start/index.mdx
+++ b/website/docs/en/guide/start/index.mdx
@@ -30,7 +30,7 @@ Rsbuild's build performance is on par with native Rspack. This is the time it ta
 
 import { BenchmarkGraph } from '@components/Benchmark';
 
-<BenchmarkGraph />
+<BenchmarkGraph short />
 
 > The above data comes from the [performance-compare](https://github.com/rspack-contrib/performance-compare) benchmark.
 
diff --git a/website/docs/zh/guide/start/index.mdx b/website/docs/zh/guide/start/index.mdx
index 3f54ded726..0558d8ecc5 100644
--- a/website/docs/zh/guide/start/index.mdx
+++ b/website/docs/zh/guide/start/index.mdx
@@ -30,7 +30,7 @@ Rsbuild 的构建性能与原生 Rspack 处于同一水平，以下是构建 100
 
 import { BenchmarkGraph } from '@components/Benchmark';
 
-<BenchmarkGraph />
+<BenchmarkGraph short />
 
 > 以上数据来自 [performance-compare](https://github.com/rspack-contrib/performance-compare) benchmark。
 
diff --git a/website/theme/components/Benchmark.module.scss b/website/theme/components/Benchmark.module.scss
index 60bd2bf633..ec3d77b08e 100644
--- a/website/theme/components/Benchmark.module.scss
+++ b/website/theme/components/Benchmark.module.scss
@@ -21,6 +21,13 @@
   margin-top: 4rem;
 }
 
+.short {
+  // Temp code to fix the width of the graph
+  :global(.container_72b36) {
+    width: 40vw;
+  }
+}
+
 @media (min-width: 640px) {
   .title {
     font-size: 3rem;
diff --git a/website/theme/components/Benchmark.tsx b/website/theme/components/Benchmark.tsx
index 21f60912f0..30ee7d11e7 100644
--- a/website/theme/components/Benchmark.tsx
+++ b/website/theme/components/Benchmark.tsx
@@ -79,8 +79,14 @@ const BENCHMARK_DATA: BenchmarkData = {
   },
 };
 
-export function BenchmarkGraph() {
-  return <BaseBenchmark data={BENCHMARK_DATA} />;
+export function BenchmarkGraph(props: { short?: boolean }) {
+  return props.short ? (
+    <div className={styles.short}>
+      <BaseBenchmark data={BENCHMARK_DATA} />
+    </div>
+  ) : (
+    <BaseBenchmark data={BENCHMARK_DATA} />
+  );
 }
 
 export function Benchmark() {